Как обновить связанные данные в d3

Question

Как обновить данные, связанные с 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); 
}; 

Answer 1

Вы можете получить доступ к данным, используя d3.select (this) .data() [0] .propertyxyz. Так что, если вам нужно, чтобы связать координаты х и у с вашими данными вы можете сделать следующее:

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

Я бы рекомендовал использовать дельта х и у значения, по какой-то причине d3.event.x и d3.event они не очень точны.