How do I update bound data in d3

Question

How do I update data bound in d3.js?

Why can I only access the bound data but not modifying it?

Also I would like to modify cx using the bound data. But in order to do that I need to update the data.

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);
};

You don't need to pass a function to the cy attribute in move, just set it as you setted the x coordinate. — Pablo Navarro, Jun 06 '13 at 22:44
You update the bound data by calling `.data()` with different data. — Lars Kotthoff, Jun 07 '13 at 08:16

score 1 · Answer 1 · answered Dec 19 '14 at 18:02

You can access the data using d3.select(this).data()[0].propertyxyz. So if you needed to bind the x and y coordinates to your data you could do the following:

        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);
        }

I would recommend using the delta x and y values, for some reason d3.event.x and d3.event.y are not very accurate.

How do I update bound data in d3

1 Answers1