自定义React D3树版本3.5.1

Question

目前在我的react应用程序中使用react-d3-tree库。我使用以下代码来装饰我的节点，我想要框阴影。但这行不通。我现在用的是LTS版本

const renderRectSvgNode = ({ nodeDatum, toggleNode }) => (
<g>
<rect
width="118"
height="40"
x="-56"
onClick={toggleNode}
style={{
fill: "white",
boxShadow: "0px 10px 10px rgba(0, 0, 0, 0.1)",
stroke: "none",
}}
/>
<text
fill="black"
strokeWidth="1"
x="0"
y="25"
dominantBaseline="middle"
textAnchor="middle"
>
{nodeDatum.name}
</text>
</g>
);'

我想知道如何在react-d3-tree中显示方框阴影而不是有轮廓的方框

Answer 1

我能够解决我的问题如下，

const renderRectSvgNode = ({ nodeDatum, toggleNode }) => ( 
<g>
<defs>
<filter id="drop-shadow">
<feDropShadow dx="0" dy="3" stdDeviation="6" floodColor="#000000" floodOpacity="0.1"/>
</filter>
</defs>
<rect
width="118"
height="40"
x="-56"
style={{
fill: "white",
stroke: "none",
borderRadius: "4px",
filter: "url(#drop-shadow)",
}}
/>
<text
fill="black"
strokeWidth="1"
x="0"
y="25"
dominantBaseline="middle"
textAnchor="middle"
>
{nodeDatum.name}
</text>
</g>
);