D3选择抛出无效查询选择错误

Question

这是我的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'。但我得到以下错误：

Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': '[object SVGGElement] .pointIndex' is not a valid selector.

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

Answer 1

你试图添加一个元素和一个字符串在一起它会引发一个错误。

如果您想访问circle的parent，然后在其中找到text元素并抓取text，则可以这样做。

function deletePoint(deleteCircle) { 
    var circleText = d3.select(deleteCircle.node()).select(function(){return this.parentNode;}); 
    console.log(circleText.select('text').text()); } 

这里是一个工作fiddle

Answer 2

这里deleteCircle.parentNode是一个HTML元素和不能与任何使用concat它和作为选择使用。

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

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