Question

我是编码领域的新手。我在玩D3，在多个SVG画布中的拖放圈子中遇到问题。在第一个画布中进行第一个移动之后，圆圈将不会拖动。而且，其他画布中的圆圈是可拖动的，但是它们以意外的方式改变。你们可以看看这个吗？提前谢谢您。以下是代码：

svg_1 = d3.select("#svg1")
  .attr("width", 150)
  .attr("height", 150)
  .style("background", "pink");
svg_2 = d3.select("#svg2")
  .attr("width", 150)
  .attr("height", 150)
  .style("background", "pink");
svg_3 = d3.select("#svg3")
  .attr("width", 150)
  .attr("height", 150)
  .style("background", "pink");
svg_4 = d3.select("#svg4")
  .attr("width", 150)
  .attr("height", 150)
  .style("background", "pink");

var initial = [{x:25, y:100}, {x:50, y:30}]
svg_1.selectAll("circle")
  .data(initial)
  .enter()
  .append("circle")
  .attr("cx", function (d) { return d.x })
  .attr("cy", function (d) { return d.y })
  .classed("linear_control", true)
  .attr("r", 4)
  .call(d3.drag().on("drag", dragged))

svg_2.selectAll("circle")
  .data(initial)
  .enter()
  .append("circle")
  .attr("cx", function (d) { return d.x })
  .attr("cy", function (d) { return d.y })
  .classed("linear_control", true)
  .attr("r", 4)
  .call(d3.drag().on("drag", dragged))

svg_3.selectAll("circle")
  .data(initial)
  .enter()
  .append("circle")
  .attr("cx", function (d) { return d.x })
  .attr("cy", function (d) { return d.y })
  .classed("linear_control", true)
  .attr("r", 4)
  .call(d3.drag().on("drag", dragged))

svg_4.selectAll("circle")
  .data(initial)
  .enter()
  .append("circle")
  .attr("cx", function (d) { return d.x })
  .attr("cy", function (d) { return d.y })
  .classed("linear_control", true)
  .attr("r", 4)
  .call(d3.drag().on("drag", dragged))

function dragged(d)
{
  d3.select(this)
  .attr("cx", d.x = d3.event.x)
  .attr("cy", d.y = d3.event.y)
}

dragged.d3.select(this)

拖放到多个SVG画布中

0 个答案: