D3.js custom edge rendering

Issue

I am trying to make a graph which is sort of similar to a map. Here, I use a force-directed graph in which the nodes are locations and the edges are the paths between locations. However, I can't seem to find any documentation on how to render an edge any different than a line with color attributes. (which I am doing now but looks kind of bland)

Is there some kind of way to have the edges custom rendered, for example, a repeated image of some sorts? Or even more specific, in my case for example, as a dirt path or similar?

Thanks in advance!

Solution

You can use <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>

Answered By - Michael Rovinsky