javascript - 如何在启用了缩放的 D3.js-SVG 中启用文本选择？

Question

我是 D3 的新手，我对这个细节感到疯狂:我正在构建一个图表，它是一个气泡图，里面有一些标签，我想让用户能够选择该图表的文本标签气泡。我的意思是，以传统方式，就好像它们突出显示网页中的任何其他文本一样。

默认情况下，图表允许用户选择气泡中的文本，但如果我启用缩放，则无法再选择文本。我通过以下方式启用了缩放:

var svg = d3
      .select(this.domSelector)
      .append("svg")
      .attr("width", width)
      .attr("height", height)
      .attr("class", "bubble")
      .call(d3.behavior.zoom().on("zoom", function () {
            svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
      }))

如果用户单击背景上的任何元素，我尝试通过阻止它来暂时禁用此效果。这就是说:

.call(d3.behavior.zoom().on("zoom", (evt) => {
     if(d3.event.sourceEvent.target.tagName.toLocaleLowerCase() == "svg"){
         svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
     }
     else svg.on('.zoom', null); }))

但行为是相同的:我无法选择文本。有什么想法吗？

https://jsfiddle.net/gal007/e2gsvkLt/

Answer 1

您可以使用 d3.event.stopPropagation() 将 mousedown 事件分配给文本元素。会是这样的:

  generateBubbleNames(nodes){
    var maxCharacters = 10;
    var labels = nodes.selectAll("text.label")
    .data(function(d) { return [d]; });

    labels.enter().append("text")
      .attr({
      "class": "label",
      dy: "0.35em"
    })
    .style("text-anchor", "middle")
    .style("font-size", function(d) { return d.r / 3; })
    .text(function(d) {
      return d[0]
    })
    .on("mousedown", function(){
      d3.event.stopPropagation();
    })
  }

这是一个工作示例:

JsFiddle