D3.js 自定义边缘渲染答案

【问题标题】：D3.js custom edge renderingD3.js 自定义边缘渲染
【发布时间】：2021-07-28 12:51:45
【问题描述】：

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

是否有某种方法可以自定义渲染边缘，例如某种重复的图像？或者更具体地说，例如，在我的情况下，作为泥路或类似路径？

提前致谢！

【问题讨论】：

你能发布一张你想要达到的目标的图片吗？
我想要的好的图像在网上并没有，所以我在绘画方面已经尽力了：imgur.com/a/CIpStjD 所以，我想要它而不是将边缘渲染为彩色线定制为看起来像某种路径（在我的绘画示例中，是一条泥路）。如果没有像这样渲染边缘的功能，是否可以为边缘赋予不同的图案、路线或其他任何东西，使它们看起来像一条带颜色的直线？
对我来说另一种可能性是使边缘的宽度收敛或发散。 IE。它从宽度为 20 的节点 X 开始（基于来自 X 的一些基准），并在宽度为 10 的节点 Y 处结束（基于来自 Y 的一些基准）。这也足够了。但是，同样，我找不到任何关于此的文档

标签： javascript angularjs d3.js

【解决方案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>

【讨论】：

谢谢！我不知道边缘过滤器，所以这非常接近我想要的！但是，我有两个问题； 1.使用feImage，我已经将边缘渲染为所需的图像。但是，由于所有边缘都有基于源/目标位置的不同旋转，因此图像放置不正确（请参阅imgur.com/a/M8Dyblf，不要提及白色背景）。我怎样才能最好地解决这个问题？ 2. 我现在怎样才能对链接进行发散/收敛？使用 feMorphology，我可以扩大或侵蚀整个链接，但我似乎无法找到使边缘发散或收敛的过滤器。
我想你在这里问了两个不同的问题。我建议发布一个（或两个）新问题，其中包含有关您需要解决的问题的更具体信息。如果您觉得我的回答有用，请标记为正确和/或点赞