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

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始终是灵感的绝佳来源。