在保持拖動機制的同時添加圓到線條

Question

我正在繪製一些小線條，我允許用戶拖動以進行選擇。我如何在保持拖曳機制的同時將一個圓圈附加到該線的中心？

var borderData = [ 
{x : 0, side: "leftBorder"}, {x : rightBorder, side: "rightBorder"} 
] 

svg.selectAll("line") 
.data(borderData) 
.enter().append('line') 
.attr("x1", function (d) { 
    return d.x - 2; 
}) 
.attr("x2", function (d) { 
    return d.x - 2; 
}) 
.attr("y1", graphHeight - kernelHeight - 1) 
.attr("y2", graphHeight + 1) 
.attr("class", function (d) { 
    return d.side; 
}) 
.call(dragBorder); 

我已經嘗試將以下內容添加到鏈的末尾，但不會顯示任何內容。

... 
.call(dragBorder) 
.append('circle') 
    .attr("cy", (graphHeight - kernelHeight - 1 + graphHeight + 1)/2) 
    .attr("cx", function(d, i) { return d.x; }) 
    .attr("r", 2); 

Answer 1

兩個觀點：作爲您的直線和圓的容器g元素

1. 電話dragBorder。

   var draggables = svg.selectAll('g.draggableLineCircleWrapper') 
       .data(borderData) 
       .enter() 
       .append('g') 
       .classed('draggableLineCircleWrapper') 
       .call(dragBorder); 
   
   draggables.append('line')... 
   draggables.append('circle')... 
   

2. 代替追加的線路和一個圓的，附加的路徑（具有一個複雜的形狀的一個元件），並在其上調用阻力。