材质 UI 图标和 D3答案

【问题标题】：Material UI Icon and D3材质 UI 图标和 D3
【发布时间】：2018-11-26 20:17:02
【问题描述】：

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

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

有没有办法从 Material UI 中导出 SVG 并将其附加到 D3 图表中？

在 D3 图表上尝试了 Append 和 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 />)

【问题讨论】：

标签： d3.js material-ui

【解决方案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);

【讨论】：

【解决方案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 中检索路径。

【讨论】：

我就是这么想的。谢谢！

【解决方案3】：

我正在构建@thibautg 解决方案，但在更改图标大小时遇到了一些问题。想出了这个有效的解决方案。您需要做的就是更改您可以在他们的 API 文档中找到的路径。

    svg.current
        .append('g')
        .attr(
            'transform',
            `translate(${outerRadius/ 5},${-outerRadius / 5})`
        )
        .append('svg')
        .attr('viewBox', '0 0 100 100')
        .attr('width', `${width.current / 5}px`)
        .attr('height', `${width.current / 5}px`)
        .append('path')
        .attr('d', 'm4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z')
        .style('fill', 'green')
        .style('stroke-width', 5);

【讨论】：