D3 line acting as a closed path

问题

Update: Here's an example of the issue - http://jsfiddle.net/Hffks/2/

I'm trying to use D3 to code a line graph and my line is being closed at the end, by which I mean 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'm using a standard declaration of a line (d3.svg.line with a 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 a for loop that iterates over the entities I'm appending a "svg:path":

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

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

Thanks for in advance for any help!

回答1:

Paths are filled by default. If you set fill to "none" and stroke to "black" you'll see that the path is not closed, it just appeared to be.

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

回答2:

My code is like 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 => d.x)
    .y(d => d.y)
    .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/

来源：https://stackoverflow.com/questions/13684690/d3-line-acting-as-a-closed-path

标签

javascript

line

d3.js