我正在尝试使用 d3 制作一个可拖动的圆圈,但会保留原始圆圈的副本。这是圆圈:
g.selectAll('circle')
.data([{
cx: 90,
cy: 80,
r: 30 }])
.enter().append('circle')
.attr('cx', function (d) {return d.cx})
.attr('cy', function (d) {return d.cy})
.attr('r', function(d) {return d.r})
.attr('class','original')
.call(dragOriginal);
这是拖动行为:
var dragOriginal = d3.behavior.drag()
.on('dragstart', cloneSpeciesMaker)
.on('drag', function (d, i) {
d.cx += d3.event.dx;
d.cy += d3.event.dy;
d3.select(this).attr('cx', d.cx).attr('cy', d.cy)
});
这是 Dragstart 函数:
function cloneSpeciesMaker(d) {
var svg = d3.select('svg');
//original becomes copy
d3.select(this)
.classed('original',false)
.attr('class','copy');
// creates new 'original' in place
var data = [{cx:d.cx,cy:d.cy,r:d.r}];
svg.append('circle')
.data(data)
.attr('class','original')
.attr("cx",function(d) {return d.x})
.attr("cy",function(d) {return d.y})
.attr("r",function(d) {return d.r})
.style("fill","purple")
.attr("class","original")
.call(dragOriginal);
}
现在,我成功地将原始圆圈变成了“副本”并拖动它,但是我在旧位置附加新圆圈的部分不起作用,任何人都可以解释为什么吗?
最佳答案
我从代码中看到的一个问题是在本节中:
function cloneSpeciesMaker(d) {
var svg = d3.select('svg');
//original becomes copy
d3.select(this)
.classed('original',false)
.attr('class','copy');
// creates new 'original' in place
var data = [{cx:d.cx,cy:d.cy,r:d.r}];
svg.append('circle')
.data(data)
.attr('class','original')
.attr("cx",function(d) {return d.x})
.attr("cy",function(d) {return d.y})
.attr("r",function(d) {return d.r})
.style("fill","purple")
.attr("class","original")
.call(dragOriginal);
}
您正在这样设置数据
var data = [{cx:d.cx,cy:d.cy,r:d.r}];
但是您正在做的事情是不正确的 d.x 和 d.y 不是您在数据中定义的。
.attr("cx",function(d) {return d.x})
.attr("cy",function(d) {return d.y})
这应该是:
.attr("cx",function(d) {return d.cx})
.attr("cy",function(d) {return d.cy})
关于javascript - 在 d3 Dragstart 上附加元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32775757/