javascript - 如何修复带有文本的气泡图中的可拖动功能？

Question

我正在设置一个新的气泡图，并希望在每个气泡内都可以拖动缩写名称。可拖动功能工作正常，气泡(无)显示在正确的位置。但是当我尝试在每个气泡内添加文本时，它们总是显示在左上角。此外，当我尝试拖放时，文本不会移动(只有气泡)。

我尝试将文本和气泡附加到节点，但它对我不起作用。

我使用 d3.v4 ( https://d3js.org/d3.v4.js )和 ( https://d3js.org/d3.v4.min.js )

里面没有文字的气泡 - 工作正常

  svg.append('g')
    .selectAll("dot")
    .data(data)
    .enter()
    .append("circle")
      .attr("class", "bubbles")
      .attr("cx", function (d) { return x(d.Interest); } )
      .attr("cy", function (d) { return y(d.Influence); } )
      .attr("r", function (d) { return z(d.bubbleSize); } )
      .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended))
      .style("fill", function (d) { return myColor(d.bubbleColor); } )

里面有文字的气泡。错误:定位不正确，拖动时文本不随气泡移动

  var node = svg.selectAll(".node")
  .data(data)
  .enter().append('g')
  .attr("class", "node")
  .attr("cx", function (d) { return x(d.Interest); } )
  .attr("cy", function (d) { return y(d.Influence); } )
  .call(d3.drag()
  .on("start", dragstarted)
  .on("drag", dragged)
  .on("end", dragended))
  ;



     node.append("circle")
      .attr("class", "bubbles")
      .attr("r", function (d) { return z(d.bubbleSize); } )
      .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended))
      .style("fill", function (d) { return myColor(d.bubbleColor); } )

    ;

    node.append("text")
    .attr("class", "text")
    .attr("cx", function (d) { return x(d.Interest); } )
    .attr("cy", function (d) { return y(d.Influence); } )
.attr("dx", -10)
.attr("dy", ".35em")
.text(function (d) {
return d.shortName
}).style("stroke", "black")
      .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended));

我希望带文本的气泡显示在与不带文本的气泡完全相同的位置，并且在拖动时 - 拖动气泡和文本，但它不起作用。

Answer 1

您的 g 元素已经定位(但请参阅下面的正确属性)并处理拖动。从 circle 和 text 元素中移除对 d3.drag 的调用，同时移除 cx 和 cy 属性text 元素。

将 pointer-events: all; 添加到 .node CSS 类。这允许 g 元素处理所有鼠标事件。

要正确定位 g 元素，请使用 transform 而不是 cx 和 cy(仅适用于 circle 元素:

.attr("transform", function (d) { var r = z(d.bubbleSize); return "translate(" + (x(d.Interest) - r) + "," + (y(d.Influence) - r) + ")"; } )

d3 gallery始终是灵感的重要来源。