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

jchrr9hc 于 2023-04-10 发布在 Java

关注(0)|答案(1)|浏览(148)

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

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

JavaScript

来源：https://stackoverflow.com/questions/75860681/generate-a-segmented-curved-path-in-d3-js

1条答案

按热度按时间

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>

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

赞(0）回复(0）举报 2023-04-10

我来回答

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

1条答案

相关问题

热门标签

最新问答