CODEWITHSUNDEEP
reactjsd3.js
CHays412
CHays412

Reputation: 145

How can I select a link using d3.select?

I have a React component containing a graph built in react-d3-graph and am trying to select a link between nodes when the link is clicked on, but I cannot figure out the correct way to target it. I am able to target an individual node with the following script:

d3.select("#graph-id-graph-wrapper").selectAll("g#graph-id-graph-container-

zoomable").selectAll("g[id='" + source + "']").selectAll("path").attr('fill',"red").attr('opacity',"1")

graph-id-graph-wrapper is the top div, graph-id-graph-container-zoomable is the child div, the nodes are referenced as g in the layout with an ID, and the path is the actual rectangular node symbol. The links are paths with no ID (children of the node paths), which look like this in the code:

<path cursor="pointer" opacity="1" d="M-10.606601717798213,-10.606601717798213h21.213203435596427v21.213203435596427h-21.213203435596427Z" fill="#57a3ff" stroke="none" stroke-width="1.5" class=""></path>

I have tried a zillion variations of d3.select(this) and nothing is working. The nodes were easier to target because they have an ID, but the link path does not.

Upvotes: 0

Views: 501

Answers (1)

calmar
calmar

Reputation: 1959

If you're trying to select that specify path, you can always use a custom pattern, d3 selector use DOM querySelector function, see source code

If you have your nodes and links without ids, maybe you can find some unique attribute that works for nodes but not for links, for example, if the node has the attribute cursor you can select all paths with it

d3.selectAll('path[cursor]')

If you want only the links, maybe then don't have cursor attribute then you can try

d3.selectAll('path:not([cursor])')

Upvotes: 0

Related Questions