CODEWITHSUNDEEP
javascripthtmld3.js
Damien King-Acevedo
Damien King-Acevedo

Reputation: 67

How do you conditionally remove elements with d3?

I have a a graph. I load a file that I parse to get changes that I need to make to the graph. The information on changes come in the form of node names, which are stored in the text field for each node.

How can I select a node based on the contents of its text field, so that I can remove it?

The HTML for a node I want to delete is below. 

<circle style="fill: rgb(204, 204, 204);" r="8"></circle><text dy=".35em" x="12">d1</text>

Upvotes: 1

Views: 866

Answers (2)

Sigfried
Sigfried

Reputation: 3080

It makes it kind of hard that your text node is outside the circle node I think you want to remove. But if it weren't, you could do:

d3.selectAll('circle>text').filter(function(d){
    return d3.select(this).text() ==="d1";
}).remove()

Upvotes: 1

ee2Dev
ee2Dev

Reputation: 1988

1) You can set the class of an element to (also) be the text content at the time you are setting the text content. Then you can select by class.

2) You can get the text content of an element if you can apply a selector just for this very element:

selection.text()

See also: https://github.com/mbostock/d3/wiki/Selections#text

3) In most cases, you set the text dynamically with some data. If the data is bound to the element, you would use that with the standard callback function

selection.filter( function (d,i) {...// filter based on d }).remove();

Upvotes: 0

Related Questions