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

现在，我成功地使原来的圆圈成为了一个副本＆＃39;并拖动它，但它在我的旧地方添加一个新圆圈的部分是不工作的，任何人都可以解释为什么？

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

在d3 dragstart上追加元素

1 个答案: