Customizing React D3 Tree version 3.5.1

Question

Currently working with react-d3-tree library in my react app.I'm using following code to decorate my nodes and I want box shadow. but its not working . can anyone spot the mistake I'm using LTS version for now

'

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>
);'

I want to know tips to show box shadow instead of box with outline in my react-d3-tree

score 0 · Accepted Answer · answered Apr 05 '23 at 16:14

I was able to solve my issue as follows,

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>
    );

Customizing React D3 Tree version 3.5.1

1 Answers1