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

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 元素上调用 dragBorder。

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

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

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

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

Add circle to line while maintaining drag mechanics

draggable

d3.js