errore grafico a linee d3js - disegno strano area

Question

Non sono stato in grado di trovare qualcuno con un problema simile e nessun indizio per risolvere il mio problema leggendo i documenti e altri problemi quindi spero che qualcuno possa aiutarmi qui.

Questo è il mio codice (che viene copiato dal documentation example)

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); 

Ora, devi chiedere come il mio 'list_indicators_3years_absolute variabile [' Gastos en activos Financieros ']' appare come:

• Dal console.log:

[Array 2, Array 2, Array 01.231.911,636 mila] 0: Array 2 0: "2010" 1: 0 lunghezza: 2 proto: Array [0] 1: Array 2 0: "2011" 1: 29.999.996,8 lunghezza: 2 proto: Array [0] 2: Array 2 0: "2012" 1: 79.204.931,01 lunghezza: 2 proto: Array [0] lunghezza: 3 proto: Array [0]

• un esempio più visivo della variabile:

Sì, ci sono solo 3 punti, per i tre anni (asse x): 2010 2011 2012

Ed ecco come l'errore grafico "linea" si presenta come:

Penso che l'errore sia nella mia struttura variabile, ma non ricevo alcun avvertimento, o indizio per scoprire qual è il problema. In effetti, entrambi gli assi sono impostati ed etichettati correttamente, e anche i tre punti. La cosa strana è che la linea sembra essere chiusa dall'ultimo punto al primo e riempita.

: -mmmmm

Grazie in anticipo!

Answer 1

Sembra che manchi la sezione <style> dell'esempio. Il fill: none è ciò che dice la non linea per chiudere dall'ultimo punto al primo:

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

si sta dicendo a utilizzare questa classe:

.attr("class", "line") 

ma se "linea" doesn Esistono in CSS referenziati o stili in linea si otterrà il comportamento di riempimento predefinito.

Consulta anche: D3.js tree with odd number of vertices, edges not shown