想要在点击节点之间的链接上添加一个圆圈,我应该能够将拖动事件附加到圆圈,这样当我拖动圆圈时,链接应该移动到。我在哪里错了?
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);
});
答案 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.dx
和event.dy
值而不是绝对值,并且您只需更改圈子cx
和{{1}而不是应用翻译(如果这更容易)。有关提示,请参阅https://jsfiddle.net/pzej8tkq/3/。