javascript 在d3.js中生成分段曲线路径

jchrr9hc  于 2023-04-10  发布在  Java
关注(0)|答案(1)|浏览(147)

我想知道如何使用d3.js生成一个分段的path曲线。我正在寻找如何生成一个输出的建议,其中每个分段都有不同的paths,并有自己的fillstroke。下面是一个例子,我正在寻找不使用d3.js创建的东西。

我已经考虑了d3.line作为生成路径的x和y坐标的选项,以及d3.arc来绘制不同的线段。不幸的是,我看不出d3.arc有什么办法可以解决这个问题。我不知道什么是最好的解决方法,所以我希望得到一些关于如何解决这个问题的反馈。我将包括一些代码与我的尝试,一旦我收到一些指导。

kcwpcxri

kcwpcxri1#

就像在注解中提到的,你可以使用stroke-dasharray。这里我使用一个<use>元素来重复一个短破折号,然后使用stroke-dashoffset来沿着路径定位破折号。

<svg viewBox="0 0 35 32" width="400">
  <defs>
    <path id="p1" d="M 31 32 C 31 10 5 36 5 17 C 5 1 32 18 25 2"
    stroke-width="5" fill="none" stroke-dasharray="2.6 100"
    pathLength="60" />
  </defs>
  <rect width="100%" height="100%" fill="silver"/>
  <use href="#p1" stroke="red" stroke-dashoffset="0" />
  <use href="#p1" stroke="green" stroke-dashoffset="-3" />
  <use href="#p1" stroke="orange" stroke-dashoffset="-6" />
  <use href="#p1" stroke="blue" stroke-dashoffset="-9" />
  <use href="#p1" stroke="gray" stroke-dashoffset="-12" />
  <use href="#p1" stroke="yellow" stroke-dashoffset="-15" />
  <use href="#p1" stroke="navy" stroke-dashoffset="-18" />
  <use href="#p1" stroke="red" stroke-dashoffset="-21" />
  <use href="#p1" stroke="green" stroke-dashoffset="-24" />
  <use href="#p1" stroke="orange" stroke-dashoffset="-27" />
  <use href="#p1" stroke="blue" stroke-dashoffset="-30" />
  <use href="#p1" stroke="red" stroke-dashoffset="-33" />
  <use href="#p1" stroke="green" stroke-dashoffset="-36" />
  <use href="#p1" stroke="orange" stroke-dashoffset="-39" />
  <use href="#p1" stroke="blue" stroke-dashoffset="-42" />
  <use href="#p1" stroke="gray" stroke-dashoffset="-45" />
  <use href="#p1" stroke="yellow" stroke-dashoffset="-48" />
  <use href="#p1" stroke="navy" stroke-dashoffset="-51" />
  <use href="#p1" stroke="red" stroke-dashoffset="-54" />
  <use href="#p1" stroke="green" stroke-dashoffset="-57" />
</svg>

不幸的是,它没有笔画(好吧,它是一个笔画,但在这种情况下,我想我们可以称之为填充)。一个解决方案可能是有第二条路径,在每个瓷砖周围创建“笔画”的“感觉”。

<svg viewBox="0 0 35 32" width="400">
  <defs>
    <path id="p1" d="M 31 32 C 31 10 5 36 5 17 C 5 1 32 18 25 2"
    stroke-width="5" fill="none" stroke-dasharray="0 .4 2.6 100"
    pathLength="60.4" />
  </defs>
  <rect width="100%" height="100%" fill="silver"/>
  <path d="M 31 32 C 31 10 5 36 5 17 C 5 1 32 18 25 2"
    stroke-width="5.8" stroke="black" fill="none" pathLength="60" />
  <use href="#p1" stroke="red" stroke-dashoffset="0" />
  <use href="#p1" stroke="green" stroke-dashoffset="-3" />
  <use href="#p1" stroke="orange" stroke-dashoffset="-6" />
  <use href="#p1" stroke="blue" stroke-dashoffset="-9" />
  <use href="#p1" stroke="gray" stroke-dashoffset="-12" />
  <use href="#p1" stroke="yellow" stroke-dashoffset="-15" />
  <use href="#p1" stroke="navy" stroke-dashoffset="-18" />
  <use href="#p1" stroke="red" stroke-dashoffset="-21" />
  <use href="#p1" stroke="green" stroke-dashoffset="-24" />
  <use href="#p1" stroke="orange" stroke-dashoffset="-27" />
  <use href="#p1" stroke="blue" stroke-dashoffset="-30" />
  <use href="#p1" stroke="red" stroke-dashoffset="-33" />
  <use href="#p1" stroke="green" stroke-dashoffset="-36" />
  <use href="#p1" stroke="orange" stroke-dashoffset="-39" />
  <use href="#p1" stroke="blue" stroke-dashoffset="-42" />
  <use href="#p1" stroke="gray" stroke-dashoffset="-45" />
  <use href="#p1" stroke="yellow" stroke-dashoffset="-48" />
  <use href="#p1" stroke="navy" stroke-dashoffset="-51" />
  <use href="#p1" stroke="red" stroke-dashoffset="-54" />
  <use href="#p1" stroke="green" stroke-dashoffset="-57" />
</svg>

如果每个瓷砖不需要它自己的颜色,路径可以在另一条路径上做一个遮罩。几乎就像一个量规/米。如果你感兴趣,我可以做一个例子。

相关问题