自定义React D3 Tree版本3.5.1

up9lanfz 于 11个月前发布在 React

关注(0)|答案(1)|浏览(143)

目前在我的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>
);'

字符串
我想知道提示，以显示框阴影，而不是框与轮廓在我的Reactd3树

d3.js

来源：https://stackoverflow.com/questions/75909620/customizing-react-d3-tree-version-3-5-1

1条答案

按热度按时间

pieyvz9o1#

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

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

字符串

赞(0）回复(0）举报 10个月前

我来回答

自定义React D3 Tree版本3.5.1

1条答案

相关问题

热门标签

最新问答