javascript - 在 d3 Dragstart 上附加元素

Question

我正在尝试使用 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);
}

现在，我成功地将原始圆圈变成了“副本”并拖动它，但是我在旧位置附加新圆圈的部分不起作用，任何人都可以解释为什么吗？

Answer 1

我从代码中看到的一个问题是在本节中:

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