javascript - d3 select抛出无效的查询选择器错误

这是我的SVG元素的结构：

<g class="point" transform="translate(241,197)">
  <circle></circle>
  <text class="pointIndex" x="-4px" y="-10px">1</text>
  <g class="deletePoint" transform="translate(0,16)">
    <circle></circle>
    <text x="-3px" y="3px">x</text>
  </g>
</g>

我创建了以下函数：

  function deletePoint(deleteCircle) {
    var circleText = d3.select(deleteCircle.parentNode + '> text')
  }

console.log(deleteCircle)返回：

 <g class="deletePoint" transform="translate(0,16)">
    <circle></circle>
    <text x="-3px" y="3px">x</text>
 </g>

我想要的是在这里找到文本：<text class="pointIndex" x="-4px" y="-10px">1</text>（在本例中为1），所以我做了deleteCircle.parentNode + ' .pointIndex'。但是我收到以下错误：


  未捕获的SyntaxError：无法在“文档”上执行“ querySelector”：
  '[object SVGGElement] .pointIndex'不是有效的选择器。


为什么会发生这种情况以及如何解决？

最佳答案

这里的deleteCircle.parentNode是html元素，不能与任何字符串连接起来并用作选择器。

您可以简单地获取文本内容，如下所示，其中deleteCircle是circle元素。

var circleText = d3.select(deleteCircle.parentNode).select("text").text();