D3.js 在保持拖动机制的同时将圆添加到直线

我正在画一些小线条，允许用户拖动以进行选择。如何在保持拖动机制的同时将圆附加到直线的中心

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

两个想法：

在充当直线和圆容器的

g

元素上调用

dragBorder

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

draggables.append('line')...
draggables.append('circle')...

与其附加直线和圆，不如附加路径（一个形状复杂的元素）并调用拖动

---

我非常喜欢第一个想法，因为它允许我在需要时添加更多对象。然而，我似乎不能给它添加任何内容。如果我在调试器中查看

draggables

，我只得到解释

False

。我快速地做了一个小提琴来演示第一个想法：