Question

我是D3的新手，我为这个细节而疯狂：我正在构建一个图形，其中是一个带有一些标签的Bubble图形，我希望用户能够选择该图形的文本标签。气泡。我的意思是，按照传统的方式，好像他们要突出显示网页中的其他任何文本一样。

默认情况下，该图形允许用户选择气泡中的文本，但是如果启用缩放功能，则无法再选择文本。我启用了缩放方式：

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

您可以使用doc.css('a.target').remove puts doc.at('html').to_s将mousedown事件分配给文本元素。会是这样的：

d3.event.stopPropagation()

这是一个可行的示例：

JsFiddle

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

1 个答案: