在d3中单击事件的节点之间的链接上创建一个圆

时间:2016-09-06 09:34:20

标签: d3.js

想要在点击节点之间的链接上添加一个圆圈,我应该能够将拖动事件附加到圆圈,这样当我拖动圆圈时,链接应该移动到。我在哪里错了?

var dragCircle = d3.behavior.drag()
      .on('dragstart', function(){
        d3.event.sourceEvent.stopPropagation();
  })
      .on('drag', function(d,i){
        var x = d3.event.x;
        var y = d3.event.y;
        d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
      });   

//I want to attach circle to the link so that when I drag circle, line should move too.
function drawCircle(x, y, size) {
svg.selectAll(".edge").append("circle")
    .attr('class', 'linkcirc')
    .attr("cx", x)
    .attr("cy", y)
    .attr("r", size)
    .style("cursor", "pointer")
    .call(dragCircle);

}


//catching the mouse position to decide to place the circle
edge.on("click",function() {
    var coords = d3.mouse(this);
    drawCircle(coords[0], coords[1],3);

});

1 个答案:

答案 0 :(得分:1)

SVG不允许您创建一个圆圈作为一条线的子节点(并且您的代码在每次点击时为每个链接创建一个圆圈)。而不是:

svg.selectAll(".edge").append("circle") # appends one circle to each edge

试试这个:

svg.append("circle") # appends a single circle to the SVG image

相应地改变你的小提琴后,我能够发动阻力事件,但它仍然需要工作。使用拖动行为,您可能希望查看event.dxevent.dy值而不是绝对值,并且您只需更改圈子cx和{{1}而不是应用翻译(如果这更容易)。有关提示,请参阅https://jsfiddle.net/pzej8tkq/3/