反应 d3 树库 svg 样式在树上看不到

Question

我有这样的 svg 设计：

true svg

当我使用 renderCustomNodeElement 属性将此 svg 放入 Tree 组件时，svg 更改如下：

broken svg

有人知道为什么会这样吗？

您可以从这里查看完整代码： https://codesandbox.io/s/rd3t-v2-custom-svg-tag-forked-dp4bbt?file=/src/App.js

Answer 1

在检查器中查看您的代码时，您可以看到以下 class 添加到您的元素中：

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

这些笔画属性是导致它的原因。我无法立即判断是什么原因造成的，但它似乎是 react-d3-tree 库添加的 class。

我将以下内容添加到您的 styles.css，修复了它。

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

请注意，如果您向 svg 添加任何具有笔划的内容，这也可能会弄乱笔划。最好查看 react d3 tree 文档，看看是否可以用更好的方式覆盖它。