Question

我们所有的图标都基于MaterialUI图标@material-ui/icons/ICON_NAME。

想在D3图形中使用左右雪佛龙。

是否可以从Material UI中导出SVG并将其附加到D3图形？

尝试在D3图形上追加和HTML，但均无效。

...
import ChevronLeft from "@material-ui/icons/ChevronLeft";


svgChart
  .append("g")
  .attr("class", "button left-button")
  .attr("transform", "translate("(" + margin.left + "," + margin.top + ")")
  .html(() => <ChevronLeft />)

Answer 1

还有一种更好的方法，您可以获取字符串组件并将其添加到g元素中。

// imports
import ReactDOMServer from 'react-dom/server';
import ChevronLeft from "@material-ui/icons/ChevronLeft";

// code
const iconHtml = ReactDOMServer.renderToString(<ChevronLeft />);
svgChart
  .append("g")
  .attr("class", "button left-button")
  .attr("transform", "translate("(" + margin.left + "," + margin.top + ")")
  .html(iconHtml);

Answer 2

我认为您不能在D3中直接使用React元素。

但是，您可以从material-ui的GitHub上的ChevronLeft.js复制路径，并将其添加到D3中的path中。您会看到代码为<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />。

const svgChart = d3.select('#chart');
const margin = {
  left: 20, 
  top: 20,
};

svgChart
  .append('g')
  .attr('class', 'button left-button')
  .attr('transform', `translate(${margin.left},${margin.top})`)
  .append('path')
  // Add the path here
  .attr('d', 'M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z');

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>

<svg id="chart" heigh="200" width="200"></svg>

也许有更好的方法从JSX检索路径。

材质UI图标和D3

2 个答案: