如何将SVG路径数据转换为可用的D3数据

时间:2018-10-03 16:44:20

标签: javascript d3.js svg

试图绕过D3,我需要将有些混乱和复杂的SVG路径数据转换为D3可以理解的简单数字,以复制路径。我已经在Illustrator中手动创建了SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="558.79" height="291.94" viewBox="0 0 558.79 291.94">
  <title>templatetest</title>
  <path d="M1.48,291.72l3.83-26.14c1.05-7.21,1.83-14.42,2.52-21.71.07-.81.61-1.92,1.35-1.57a1.33,1.33,0,0,1,.55,1c1.26,6.15,1.27,15.59,4.86,20.88.86.6,1.84-.63,2.08-1.66,1.54-6.47,1-14.11,1.57-20.77.7-8,1.45-15.89,2.06-23.85.07-.88.37-2,1.25-2s1.22.76,1.34,1.48a5.61,5.61,0,0,0,.45,2.14,2.25,2.25,0,0,0,3.16.3,5.74,5.74,0,0,0,1.78-3c3.34-10.81,2.52-24.11,3.33-35.36Q33,162.44,34,143.49a1.59,1.59,0,0,1,.49-1.31c.88-.59,1.72.79,1.88,1.82,1.63,10.25,3.14,20.45,5.66,30.52a14,14,0,0,0,2.52,5.88,3.64,3.64,0,0,0,1.91,1.28c4.41.94,7.09-8.48,7.61-11.41l5.59-31.63c1.49-8.48,1.1-17.91,4.51-25.94.15-.35.38-.76.76-.8s.76.39,1,.78c2.85,5.46,2.58,12,4,17.89.93,3.82,3.46,20.92,7.71,21.79,5,1,9.08-11.94,10.48-15.4a340,340,0,0,0,18.77-64C111,51,111.24,28.44,115,6.35a7.53,7.53,0,0,1,.93-2.92C117.17,1.49,120,1,122.08,2a8.86,8.86,0,0,1,3.57,3.38c3.92,6.06,5.48,14.66,7.52,21.55,2.49,8.47,4.82,17,7.62,25.36q7.69,23,16.52,45.64c1.62,4.15,3.89,8.85,8.25,9.77,2.72.58,5.51-.54,7.92-1.94,14-8.09,22.65-26,38.69-27.78,9-1,17.57,3.67,26,7.11s18.75,5.52,26,.1c4.05-3,6.32-7.79,8.44-12.37,2.86-6.19,5.68-12.39,8.53-18.58,2-4.35,3.93-8.72,5.76-13.18a4,4,0,0,1,1-1.61,2.73,2.73,0,0,1,3-.16,8,8,0,0,1,2.32,2c6.1,7,11.89,15,19.87,19.94,9.06,5.66,19.84,7.8,30.4,9.47A466.22,466.22,0,0,0,558.33,54.07" style="fill: none;stroke: #000;stroke-miterlimit: 10;stroke-width: 3px"/>
</svg>

对于那些好奇的人来说,像这样:

enter image description here

我想使用D3绘制相同的路径。因此,我需要某种方法将路径数据(d)转换为D3可以理解的值,并去除所有M,C,L等。这是D3代码:

var path = svg.append("path")
      .attr("d", line(data))
      .attr("id","myPath")
      .attr("stroke", "red")
      .attr("stroke-width", "2")
      .attr("fill", "none");

数据变量必须类似于:

var data = [1.48, 291.72, 3.83, 26.14, 1.05, 7.21...etc];

该路径动画化,并与数据数组中的一堆随机数一起正常工作。我在这里花了很多时间尝试各种方法,但是最终,到目前为止,许多问题似乎比我需要执行的(貌似)简单的提取/转换要做的事情还要复杂。

任何帮助表示赞赏! :)

0 个答案:

没有答案