D3.js 自定义边缘渲染

Question

我正在尝试制作一个类似于地图的图表。在这里，我使用力导向图，其中节点是位置，边是位置之间的路径。但是，我似乎找不到任何关于如何渲染与具有颜色属性的线不同的边缘的文档。（我现在正在做，但看起来有点乏味）

是否有某种方法可以自定义呈现边缘，例如，某种重复的图像？或者更具体一点，例如，在我的例子中，作为一条土路或类似的道路？

提前致谢！

Answer 1

您可以使用 <filter>:

<svg>
  <filter id="my-filter">
    <feFlood flood-color="orange" flood-opacity="0.75" in="SourceGraphic"></feFlood>
    <feComposite operator="in" in2="SourceGraphic"></feComposite>
    <feGaussianBlur stdDeviation="4"></feGaussianBlur>
    <feComponentTransfer result="glow1">
      <feFuncA type="linear" slope="4" intercept="0"></feFuncA>
    </feComponentTransfer>
    <feMerge>
      <feMergeNode in="glow1"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
  </filter>
  <path d="M 10,10 L 100,100" filter="url(#my-filter)" stroke="orange" stroke-width="3"/>
</svg>

D3.js 自定义边缘渲染

D3.js custom edge rendering

javascript

d3.js

angularjs