Материал UI Icon и D3 - PullRequest
Новая
       5

Материал UI Icon и D3

0 голосов
/ 26 ноября 2018

Все наши иконки основаны на значках MaterialUI @material-ui/icons/ICON_NAME.

Хотелось бы использовать левый и правый шеврон на графике D3.

Есть ли способ экспортировать SVGиз пользовательского интерфейса материалов и добавить его к графику D3?

Пробовал добавить и HTML на графике D3, и ни один из них не работал. 

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


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

1 Ответ

0 голосов
/ 27 ноября 2018

Я не думаю, что вы можете использовать элемент React непосредственно в D3.

Однако вы можете скопировать путь из ChevronLeft.js в GitHub для Material-Ui и добавить его к себе.path в D3.Вы видите, что код <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.

...