Question

我的mysql > ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY ''; mysql > FLUSH PRIVILEGES;有svg元素和text。我只需要获取title元素的文本，即text。但它返回了我Zombieland (9) Zombieland (9)Zombieland (9)和text元素的文字。

以下是我的选择。

title

Answer 1

没有CSS选择方法可以执行此操作，但您可以删除标题，选择文本，然后重新添加标题以完成它。

var text = d3.select(".horizontalLable");
var title = d3.select(".horizontalLable > title");
text.node().removeChild(title.node()); 
console.log(text.text());
text.node().append(title.node());

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg>
<text class="horizontalLable" text-anchor="end" alignment-baseline="hanging" style="font-size: 10px; alignment-baseline: hanging; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; fill: rgb(0, 0, 0);" transform="translate(365,2)">Zombieland (9)<title>Zombieland (9)</title></text>
</svg>

Answer 2

假设它是您想要的文本而不是节点的可重用选择器，可以在Robert's Answer上构建，而无需通过将文本节点复制到虚拟节点来修改DOM，然后可以对其进行操作

＆＃13;

var text = d3.select(".horizontalLable");
var copy = d3.select(text.node().cloneNode(true))
var title = copy.select("title");
copy.node().removeChild(title.node()); 
console.log(copy.text());

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg>
<text class="horizontalLable" text-anchor="end" alignment-baseline="hanging" style="font-size: 10px; alignment-baseline: hanging; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; fill: rgb(0, 0, 0);" transform="translate(365,2)">Zombieland (9)<title>Zombieland (9)</title></text>
</svg>

＆＃13;

Answer 3

就个人而言，我更喜欢一种非侵入式的方法，它只是为了提取一些已经存在的文本而不操纵DOM。 <text>元素有一个属性childNodes，在您的情况下，它包含两个不同types的节点：一个类型TEXT_NODE，其中包含您所追求的实际文本内容，以及ELEMENT_NODE类型的另一个，即<title>。因此，您可以轻松地筛选这些节点，只查找您感兴趣的节点。

var text = d3.select(".horizontalLable").node();
var textNodes = Array.from(text.childNodes)         
  .filter(c => c.nodeType === Node.TEXT_NODE);  
  
console.log(textNodes[0].textContent);

<script src="https://d3js.org/d3.v4.js"></script>

<svg>
  <text class="horizontalLable" text-anchor="end" alignment-baseline="hanging" style="font-size: 10px; alignment-baseline: hanging; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; fill: rgb(0, 0, 0);" transform="translate(365,2)">Zombieland (9)<title>Zombieland (9)</title></text>
</svg>

或者，基本相同但更多D3- ish ，您可以这样做：

var text = d3.select(".horizontalLable")
  .selectAll(function() {
    return Array.from(this.childNodes)         
      .filter(c => c.nodeType === Node.TEXT_NODE)
  })
  .text();
  
console.log(text);

<script src="https://d3js.org/d3.v4.js"></script>

<svg>
  <text class="horizontalLable" text-anchor="end" alignment-baseline="hanging" style="font-size: 10px; alignment-baseline: hanging; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; fill: rgb(0, 0, 0);" transform="translate(365,2)">Zombieland (9)<title>Zombieland (9)</title></text>
</svg>

旁注：由于在性能问题上摆弄DOM是相当昂贵的操作我决定设置一个test case来比较这个问题的答案所提出的解决方案。事实证明，我的第一种方法是最快的，因为它避免了操纵DOM，而大多使用vanilla JS。使用D3的第二种解决方案执行速度较慢，仅为10％。排在第三位的是Robert Longson's移除<title>后续追加，根据使用的浏览器，速度降低30-50％。最慢的实现是John's克隆节点，执行速度大约低70-80％。

无论如何，这些结果不应过分强调;出于好奇，我做了测试用例，我想分享结果。对于它的价值，这里的主要问题应该是代码的易用性，清晰度，简洁性和可理解性。

d3.js选择器只获取文本元素的文本

3 个答案: