D3js string error - drawing a strange area

Question

I could not find someone with a similar problem, and no hints to solve my problem by reading documents and other problems, so I hope someone can help me here.

This is my code (which is copied from the document)

var margin = {top: 20, right: 20, bottom: 30, left: 150}, width = document.getElementById("aapp_content_charts").clientWidth - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x = d3.time.scale() .range([0, width]); var y = d3.scale.linear() .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom") .ticks(3); var yAxis = d3.svg.axis() .scale(y) .orient("left"); var line = d3.svg.line() .x(function(d) { return x(d3.time.year(parseDate(d[0]))); }) .y(function(d) { return y(d[1]); }); var svg = d3.select("#aapp_content_charts").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); x.domain(d3.extent(list_indicators_3years_absolute['Gastos en activos financieros'] , function(d) { return parseDate(d[0]);})); y.domain(d3.extent(list_indicators_3years_absolute['Gastos en activos financieros'] , function(d) { return d[1];})); svg.append("g") .attr("class", "xaxis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("g") .attr("class", "yaxis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("(€)"); svg.append("path") .datum(list_indicators_3years_absolute['Gastos en activos financieros']) .attr("class", "line") .attr("d", line); 

Now you will be wondering how my variable 'list_indicators_3years_absolute [' Gastos en activos financieros'] ”looks like this:

• On the .log console:

[Array 2 , Array 2 , Array 2 ] 0: Array 2 0: "2010" 1: 0 length: 2 Proto : array [0] 1: Array 2 0: "2011" 1: 29999996.8 length: 2 Proto : array [0] 2: Array 2 0: "2012" 1: 79204931,01 length: 2 Proto : array [0] length: 3 Proto : array [0]

• a more obvious example of a variable:

Yes, only three points in three years (x-axis): 2010, 2011, 2012

And here is what the error bar chart looks like:

I think the error is in my variable structure, but I do not receive any warning or do not know that this is a problem. In fact, both axes are installed and marked correctly, as well as three points. It is strange that the line seems to be closed from the last point to the first and filled.

: - mmmmm

Thanks in advance!

Answer 1

There seems to be no <style> section in this example. fill: none means that the line does not close from the last point to the first:

 .line { fill: none; stroke: steelblue; stroke-width: 1.5px; } 

You say you use this class:

 .attr("class", "line") 

but if the "string" does not exist in CSS reference styles or inline styles, you will get the default padding behavior.

See also: Tree D3.js with an odd number of vertices, no edges shown