在保持拖动机制的同时将圆圈添加到线条

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

两个想法：

1. 在dragBorder元素上调用g，该元素充当您的直线和圆圈的容器。

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

2. 不添加直线和圆，而是添加一条路径（一个具有复杂形状的元素）并在其上调用拖动。