Question

我想让文字标签可以拖动，并在拖动时将一条线附加到圆圈。

.call(drag)适用于点，但不适用于标签

   label = container.append("g")
      .attr("class", "label")
      .selectAll(".label")
        .data(dots)
      .enter().append("text")
        .text(function(d) {return d.x + d.y; })
        .attr("x", function(d) {return d.x; })
        .attr("y", function(d) {return d.y; })
        .attr("text-anchor", "middle")
        .call(drag)

Answer 1

在rect后面添加text，然后在你的矩形上添加.call(drag)。要获得合适的rect，您可以使用text.getBBox()。

Answer 2

这是我在D3.js中演示可拖动文本标签的JSFiddle

https://jsfiddle.net/h1n6fuwr/

基本上你想要定义以下变量/函数：

const drag = d3.behavior.drag()
  .origin(function(d) { return d; })
  .on("dragstart", dragstarted)
  .on("drag", dragged)
  .on("dragend", dragended)

function dragstarted(d) {
  d3.event.sourceEvent.stopPropagation();
}

function dragged(d) {
  const elem = d3.select(this)
  elem.attr('x', +elem.attr('x') + d3.event.dx)
  elem.attr('y', +elem.attr('y') + d3.event.dy)
}

function dragended(d) {}

然后在文字标签上拨打.call(drag)。

const labels = ['Drag Me1', 'Drag Me2', 'Drag Me3']

d3.select('svg')
  .selectAll('text')
  .data(labels)
  .enter()
  .append('text')
  .text(d => d)
  .attr('fill', 'green')
  .attr('x', (d, i) => 10 + i*30)
  .attr('y', (d, i) => 15 + i*30)
  .call(drag)

d3.js无法调用标签上的拖动

2 个答案: