用D3绘制虚线外线

Question

我一直想弄清楚如何用D3.js绘制带有虚线轮廓的线，如下例所示。关于如何实现这一目标的任何提示？

修改 我用地图做这个，所以我不能创建我自己的线，因为它们是在地图数据中定义的。我能以某种方式用偏移画两次线吗？

Answer 1

不完全符合您的需要

我尝试使用svg中的模式来解决这个问题。

首先创建一个def并在里面制作一个模式：

<svg width="1000" height="1000">
  <defs>
    <pattern id="cyril" patternUnits="userSpaceOnUse" width="4" height="4">
      <path d="M 2, 0 l 0, 4" stroke-width="1" shape-rendering="crispEdges" stroke="darkorange" stroke-linecap="square"></path>
      <path d="M 0,2 l 4,0" stroke-width="1" shape-rendering="crispEdges" stroke="darkorange" stroke-linecap="square"></path>
    </pattern>
  </defs>
</svg>

现在制作一个复杂的路径并用这样的模式填充笔划

svg
  .append("path")
  .attr("d", "M 100 350 q 150 -300 300 0")
  .attr("stroke", "url(#cyril)")
  .style("stroke-width", "10")
  .style("fill", "none");

工作代码here

希望这有帮助！