D3選擇拋出無效查詢選擇錯誤

這是我的SVG元素的結構：D3選擇拋出無效查詢選擇錯誤

<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.

爲什麼會發生這種情況，以及如何解決它？

來源

2016-01-21 alexchenco

，因爲你不能添加的元素與串起來。 – epascarello

你試圖添加一個元素和一個字符串在一起它會引發一個錯誤。

如果您想訪問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

來源

2016-01-21 04:25:32 Fawzan

這裏deleteCircle.parentNode是一個HTML元素和不能與任何使用concat它和作爲選擇使用。

您可以簡單地獲取文本內容，如下所示，其中deleteCircle是圓圈元素。

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

來源

2016-01-21 04:25:38 Gilsha

雖然我在6秒鐘之前擊中了輸入，但我從你身上學到了這一技巧。也許這就是我們的答案看起來很相似的原因：D – Fawzan

D3選擇拋出無效查詢選擇錯誤

回答

相關問題