D3 acting as a closed path

Question

Update: Here is an example of a problem - http://jsfiddle.net/Hffks/2/

I am trying to use D3 to encode a line graph, and my line closes at the end, by which I mean that it acts as a closed path, where the first and last points are the same. My data comes in the following JSON format:

[ entityA : [ { time : 1230000, // time since epoch attribute1 : 123 // numeric value attribute2 : 123 // numeric value }, { time : 1230010, // time since epoch attribute1 : 123 // numeric value attribute2 : 123 // numeric value } ], entityB : [ { ... // same format as above ... ] 

I use the standard line declaration (d3.svg.line with function for x and y):

 var line = d3.svg.line() .x(function(d) { return x_scale(d.c_date)); }) .y(function(d) { return y_scale(d.total); }); 

Then inside the for loop, which iterates over the objects, I add "svg: path":

 canvas.append("svg:path") .attr("d", line(data[entity])) 

Everything else about the graph works: the points are correctly placed, I have several independent lines per entity, the axes are highlighted, etc. However, each independent row acts as a closed path.

Thanks for the help for any help!

Answer 1

Paths are populated by default. If you set fill to "none" and stroke to "black", you will see that the path is not closed, it just turned out to be.

Working fiddle: http://jsfiddle.net/Hffks/3/

Answer 2

My code is this:

 var width = 400; var height = 400; var svg = d3.select('body') .append('svg') .attr('width', width) .attr('height', height); //The data for our line var lineData = [{ "x": 1, "y": 5 }, { "x": 20, "y": 20 }, { "x": 40, "y": 10 }, { "x": 60, "y": 40 }, { "x": 80, "y": 5 }, { "x": 100, "y": 60 } ]; //The line SVG Path we draw var lineGraph = svg.append("path") .attr("d", d3.line() .x(d => dx) .y(d => dy) .curve(d3.curveLinear)(lineData)) //.curve(d3.curveBasis)(lineData)) //Draws smooth joints- yumuşak birleşim noktası(mafsal) çizer .attr("stroke", "blue") .attr("stroke-width", 2) .attr("fill", "none"); 

You can check here for d3 version 5.9.2: https://jsfiddle.net/jsfiddleCem/u31omp5z/8/