D3.js custom edge rendering

Question

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!

Answer 1

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>