react d3 tree library svg styles are not seeing on the tree

Question

I have an svg design like this:

true svg

when I put this svg into the Tree component with renderCustomNodeElement prop, svg changes like this:

broken svg

Does anyone know why is this happening?

You can see the full code from here: https://codesandbox.io/s/rd3t-v2-custom-svg-tag-forked-dp4bbt?file=/src/App.js

score 0 · Accepted Answer · answered May 18 '22 at 12:29

When viewing your code in the inspector, you can see the following class is added to your elements:

.rd3t-node {
    cursor: pointer;
    fill: #777;
    stroke: #000;
    stroke-width: 2;
}

Those stroke attributes are what's causing it. I cannot immediately tell what's causing it, but it seems to be a class added by the react-d3-tree library.

I added the following to your styles.css, which fixed it.

svg .rd3t-node {
    stroke-width: 0px;
}

Note that if you add anything that has a stroke to your svg, this might also mess with the stroke. It would be better to check the react d3 tree documentation to see if you can override it in a better way.

You are a hero! Very appreciate. – gokcer May 18 '22 at 12:35 — gokcer, May 18 '22 at 12:35

react d3 tree library svg styles are not seeing on the tree

1 Answers1