D3, js строка данных пути - мне ее анализировать или для этого есть API? - PullRequest
Новая
       6

D3, js строка данных пути - мне ее анализировать или для этого есть API?

0 голосов
/ 18 февраля 2020

сейчас изучаю D3, и у меня есть сценарий использования, где у меня есть следующий код: 

let length = (3 + ((15000000 / 1500) % 8)) | 0;
let polygon = d3
      .radialLine()
      .angle((_, i) => (i / length) * 2 * Math.PI)
      .curve(d3.curveCardinalClosed)
      .radius(() => 150);
let path = polygon({ length });

Таким образом, переменная 'path' дает мне атрибут "d" в виде строки.

Теперь для реализации, я имею в виду, что мне нужны одни и те же данные пути в более «разбираемом» формате.

Вопрос - конечно, я могу просто разобрать строку сразу (есть много парсеры, чтобы превратить строку пути d в массив et c), но мне просто интересно, есть ли встроенный метод d3 для этого? чтобы мне не приходилось использовать дополнительный парсер?

1 Ответ

1 голос
/ 19 февраля 2020

Я не думаю, что есть один встроенный в d3, но если бы он был, я бы хотел услышать об этом!

Вы можете использовать этот пакет npm:

https://www.npmjs.com/package/svg-path-parser

Или встроенный в браузер path.getPathData () Новый API (который заменяет старый path.pathSegList)

К сожалению, пока не реализован во всех браузерах, поэтому мы можем использовать на данный момент polyFill, и надеюсь, что он скоро получит широкую поддержку.

Пример: 

const route = document.querySelector('#route');
console.log(route.getPathData()); //.pathSegList(); .getPathData();
<svg viewBox="0 0 500 500">
    <path stroke="grey" fill="none" id="route" d="M50,25 75,55 Q75,75 35,75 z" />
</svg>
<script src="https://cdn.jsdelivr.net/npm/path-data-polyfill@1.0.3/path-data-polyfill.min.js"></script>
...