Javascript 如何更新d3中的绑定数据

如何更新d3.js中绑定的数据

为什么我只能访问绑定的数据而不能修改它

我还想使用绑定的数据修改cx。但为了做到这一点，我需要更新数据

var dataset = [10, 110];

var svg = d3.select("body").append("svg:svg")
  .attr("width", 960)
  .attr("height", 500);

var g = svg.append("svg:g");

g.selectAll("circle")
  .data(dataset)
  .enter()
.append("svg:circle")
.attr("cx", function(d) {return d;} )
.attr("cy", 10 )
.attr("r", 5)
.style("fill", "rgb(125,125,125)")
.call(d3.behavior.drag().on("drag", move));

function move(d){
  var dragTarget = d3.select(this);
  dragTarget
    .attr("cx", d3.event.dx + parseInt(dragTarget.attr("cx")))
    .attr("cy", function(){return d3.event.dy + parseInt(dragTarget.attr("cy"))});

  d = d + d3.event.dx;
  console.log(d);
};

---

您可以使用d3.select（this）.data（）[0].propertyxyz访问数据。因此，如果需要将x和y坐标绑定到数据，可以执行以下操作：

        function move() {
            d3.select(this).data()[0].x += d3.event.dx;
            d3.select(this).data()[0].y += d3.event.dy;
            d3.select(this).attr("x", +d3.select(this).attr("x") + d3.event.dx);
            d3.select(this).attr("y", +d3.select(this).attr("y") + d3.event.dy);
        }

---

由于某些原因，我建议使用增量x和y值d3.event.x和d3.event.y不是很准确。

您可以使用d3.select（this.data（）[0]）.propertyxyz访问数据。因此，如果需要将x和y坐标绑定到数据，可以执行以下操作：

        function move() {
            d3.select(this).data()[0].x += d3.event.dx;
            d3.select(this).data()[0].y += d3.event.dy;
            d3.select(this).attr("x", +d3.select(this).attr("x") + d3.event.dx);
            d3.select(this).attr("y", +d3.select(this).attr("y") + d3.event.dy);
        }

---

由于某些原因，我建议使用delta x和y值d3.event.x和d3.event.y不是很精确。

您不需要在move中向cy属性传递函数，只需在设置x坐标时进行设置。您可以通过调用

.data（）更新绑定数据

使用不同的数据。您不需要在move中将函数传递给cy属性，只需在设置x坐标时进行设置。您可以使用不同的数据调用

.data（）

来更新绑定的数据。