reactjs 使用图像代替svg圆(react-d3-tree)

lb3vh1jj 于 2023-01-17 发布在 React

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

我最近更新到了2.0.1版本，我很难设置图像而不是svg圆到各个节点。在旧版本中，我使用了nodeSvgShape属性：

nodeSvgShape: {
  shape: 'image',
  shapeProps: {
     href: AppState.config.api.img + mainTile.image,
     width: 100,
     height: 100,
     x: -50,
     y: -17,
  },
},

然而，在当前版本中，这什么也不做。有没有办法在当前版本中实现这一点？
先谢谢你

reactjs

来源：https://stackoverflow.com/questions/66596913/use-images-instead-of-svg-circle-react-d3-tree

1条答案

按热度按时间

x6h2sr281#

如果一年后你仍然有这个问题，以下是我是如何做到这一点的。
通过使用Tree组件的renderCustomNodeElement属性，我可以对其他SVG图像执行此操作。通过传递您创建的render函数，您可以将render函数应用于每个节点（可在以下文档中找到：www.example.com）。https://www.npmjs.com/package/react-d3-tree#styling-nodes ).
下面是一个如何实现它的示例，例如使用一个对象将节点名称Map到SVG字符串，然后将其传递给Tree组件：

import SVG from 'react-inlinesvg';

const renderMol = ({ nodeDatum, toggleNode }) => (
    <g>
        <SVG src={svgMapping[nodeDatum.name]}/>
    </g>
);
return (
    <Tree data={mydata}
          renderCustomNodeElement={nameOrMol} />
)

赞(0）回复(0）举报 2023-01-17

我来回答

reactjs 使用图像代替svg圆(react-d3-tree)

1条答案

相关问题

热门标签

最新问答