d3相當於jQuery父項（）

我有各種SVG <g>對象，每個對象都有一個<circle>子項和一個<text>子項。我可以使用select()找到特定對象<text>，通過連接到它的類，然後修改它：d3相當於jQuery父項（）

d3.select('text.my-class') 
    .classed("my-class",false).classed("new-class",true) 
    .text("Next Stage!") 
    ;

現在我需要修改它的圈子兄弟。圓的面積沒有特別的標識類（hhmmm ......也許給它一個會做這樣的D3方式嗎？），所以我的第一次嘗試是jQuery的，如：

d3.select('text.my-class').parent().select('circle') 
    .attr('style','fill:#f00;') 
    ;

失敗，出現「父不一個功能「。

對類似問題的回答（How to select parent element of current element in d3.js）建議使用this.parentNode，但要麼我錯用了它，要麼它在這裏不起作用。我已經嘗試了這兩種方法：

d3.select('text.my-class').select(parentNode).select('circle') 
d3.select('text.my-class').select(this.parentNode).select('circle')

來源

2014-03-25 Darren Cook

D3沒有訪問父節點的方法。您可以使用node()方法訪問選定元素的DOM節點。該元素將有parentNode屬性：

var textNode = d3.select('text.my-class').node(), // DOM node 
    parentNode = textNode.parentNode,    // Parent DOM node 
    parentSelection = d3.select(parentNode),  // Selection containing the parent DOM node 
    circle = parentSelection.select('circle');  // selection containing a circle under the parent selection

在回調中，你可以使用：

d3.select('text.my-class') 
    .on('mouseover', function(d) { 
     // The 'this' context is set to the DOM element, not the selection 
     var circle = d3.select(this.parentNode).select('circle'); 
     circle.attr('fill', 'red'); 
    });

問候，

來源

2014-03-25 12:48:40

謝謝！我使用了'var textNode = d3.select（'text.my-class'）;'然後'd3.select（textNode.node（）。parentNode）.select（'circle'）。attr（'style'，'填寫：＃f00;'）'，它似乎工作到目前爲止。 :-) –

您可以使用：

selection.select(function() { return this.parentNode; });

你也可以只需將您自己的.parent（）方法添加到d3.selection.prototype：

d3.selection.prototype.parent = function() { 
    return this.select(function() { return this.parentNode; }); 
}; 

// example! 
d3.selectAll(".child").parent().each(function() { 
    console.log(this.className); 
});

demo on jsbin

來源

2014-03-29 22:14:54 gnarf

d3相當於jQuery父項（）

回答

相關問題