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 (이) .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); 
     } 

나는 몇 가지 이유 d3.event.x 및 d3.event를 들어, 델타 x와 y 값을 사용하는 것이 좋습니다 .y는별로 정확하지 않습니다.