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

0g0grzrc  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(176)

我想了解一下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>

对于那些好奇的人来说,它看起来是这样的:

我想用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];

在数据数组中的一组随机数中,路径可以很好地工作。我已经花了好几个小时在这里尝试各种方法,但最终,到目前为止提出的许多问题似乎要做比我需要执行的(看似)简单的提取/转换更复杂的事情。
感谢您的帮助!:)

uhry853o

uhry853o1#

我是这样解决的:

svg
.append('path')
.attr('width', '18px')
.attr('height', '18px')
.attr('fill', '#5160E8')
.attr('d', 'M35.526 3.14379C35.526 1.68981 34.7464 0.509094 33.7844 0.509094H1.97927C1.01718 0.509094 0.237671 1.68981 0.237671 3.14379V24.2201C0.237671 25.6741 1.01718 26.8545 1.97927 26.8545H12.2357L17.8818 35.6364L23.5279 26.8545H33.7844C34.7464 26.8545 35.526 25.6741 35.526 24.2201V3.14379Z');

相关问题