Q:

Adding stroke and fill in d3 line

I want to add stroke and fill at the d3 line. 
result
But if I add fill to path I get.
fill
I can solve my problem with code duplication. I think there's a better solution.
Simple svg for example.

<svg height="150" width="200" fill="red" stroke="blue" stroke-width="4">
    <path d="M80,50L110,80L140,90L170,70L20080L320,70"></path>
</svg>

<svg height="150" width="200" fill="none">
    <path d="M80,50L110,80L140,90L170,70L20080L320,70" stroke="red" stroke-width="8"></path>
    <path d="M80,50L110,80L140,90L170,70L20080L320,70" stroke="blue" stroke-width="4"></path>
</svg>

A:

It's not perfect for all lines (there can be artifacts at sharp angles), but you can use a filter to do a two-tone line. This filter first erodes the line by a unit on all sides, recolors it to red and puts this thinner line on top of the original blue. Note that the end-caps are two toned as well, so if you want it perfect, I would write a marker for the ends that is styled appropriately

<svg height="150" width="200" fill="none" stroke="blue" stroke-width="4">
    <defs>
   <filter id="twotone-line">
   <feMorphology operator="erode" radius="1"/>
   <feColorMatrix type="matrix" values="0 0 0 0 1
                                        0 0 0 0 0 
                                        0 0 0 0 0 
                                        0 0 0 1 0"/>
   <feComposite operator="over" in2="SourceGraphic"/>
   </filter>
   </defs>
    <path filter="url(#twotone-line)"  d="M80,50L110,80L140,90L170,70L20080L320,70"></path>
</svg>

