获取SVG Text元素的click事件的特定单词

Question

在this example中，我通过d3.js触发SVG onClick()元素中的text事件，以根据文本内容进行搜索。见下面的摘录：

gnode.append("text")
    .attr("x", 14)
    .attr("y", ".31em")
    .text(function(d) {
      return d.Title;
    })
    .on("click", function(d) {
      if (d3.event.defaultPrevented) return;
      clickedNode = d;
      var words = d.Title.toLowerCase().split(" ").filter(function(w) {
        return w != keyword;
      });
      console.log(words);
      updateNodes(words[Math.floor(Math.random() * words.length)]);
    });

在上面的代码中，我实际上并不知道单击了哪个单词 - 我只是使用了一个引用键盘并随机选择另一个 。实际上，我想要做的是获取被点击的特定单词，并将其用作我的听众的输入。

我的问题如下：

给定SVG Text元素，如何确定元素中单击的单词以用于事件？

ps：有一些方法可以使用常规HTML，例如提供的here。如果没有生成一堆离散的<text>元素并从g元素中删除它们，我就不知道如何在不使用封闭元素的情况下捕获特定单词。我相信jQuery不会让我在SVG中这样做。

Answer 1

我几乎可以肯定text元素的点击是原子的。但是，你应该能够使用tspan element。为每个单词创建一个并将事件处理程序挂起（或在父text节点上并使用事件委派）。奖金，你可以单独设置每个单词的样式，使它们看起来可点击。

我没有试过这个，应该工作，如果没有，请告诉我。