如何更新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);
};
答案 0 :(得分:1)
您可以使用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不是很准确。