How to fill the inner area between multiple SVG tracks?

Question

I am working with d3js (v4) and I would like to populate a specific area defined in several ways.

Here is my form:

Each path is defined by an array of coordinates. Each of them used different curved or linear lines.

This is the code for one way:

g.append('path') .datum(foobar) .attr('d', d3.line() .curve(d3.curveBundle) .x(function (d) { return dx; }) .y(function (d) { return dy; })) .style('fill', 'none') .style('stroke', 'purple') .style('stroke-width', '3px'); 

I tried to combine the data of each path, but the padding does not work correctly:

  var data = ''; svg.selectAll('path') .each(function () { data += d3.select(this).attr('d'); }); svg.append('path') .attr('d', data) .style('fill', 'red') .style('stroke', 'black') .style('stroke-width', '3px'); 

Below is a form with all the items used to draw tracks (one color for each path). Some of them are divided between the paths (1 13, 5 6, 8 9, 10 11)

https://jsfiddle.net/ev4821c6/4/

Note: this fiddle uses some random values ​​to generate the form (to reflect what I really need).

Do you have any idea how I could fill in the content (like the inside) of these paths?