d3js line chart error - vẽ khu vực kỳ lạ

Question

Tôi không thể tìm được ai đó có vấn đề tương tự, và không có manh mối để giải quyết vấn đề của tôi đọc tài liệu và các vấn đề khác vì vậy tôi hy vọng rằng một số người có thể giúp tôi ở đây.

Đây là mã của tôi (được sao chép từ 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); 

Bây giờ, bạn sẽ được hỏi làm thế nào biến 'list_indicators_3years_absolute của tôi [' Gastos en activos financieros ']' trông giống như:

• Từ console.log:

[mảng 2, Array 2, Array 2] 0: Array 2 0: "2010" 1: 0 dài: 2 proto: Array [0] 1: Array 2 0: "2011" 1: 29.999.996,8 dài: 2 proto: Array [0] 2: Array 2 0: "2012" 1: 79.204.931,01 dài: 2 proto: Array [0] dài: 3 proto: Array [0]

• một ví dụ trực quan hơn của biến:

Vâng, chỉ có 3 điểm, trong ba năm (trục x): 2010, 2011 2012

Và đây như thế nào lỗi "dòng" biểu đồ trông giống như:

Tôi nghĩ rằng lỗi là trong cấu trúc biến của tôi, nhưng tôi không nhận được bất kỳ cảnh báo, hoặc đầu mối để tìm ra vấn đề là gì. Trên thực tế, cả hai trục đều được đặt và gắn nhãn chính xác và cả ba điểm là tốt. Điều kỳ lạ là dòng dường như bị đóng từ điểm cuối cùng đến điểm đầu tiên, và đầy.

: -mmmmm

Cảm ơn bạn trước!

Answer 1

Có vẻ như bạn đang thiếu phần <style> từ ví dụ đó. Các fill: none là những gì nói với dòng không để đóng từ điểm cuối cùng để là người đầu tiên:

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

Bạn đang nói với nó để sử dụng lớp này:

.attr("class", "line") 

nhưng nếu "dòng" doesn không tồn tại trong CSS được tham chiếu hoặc kiểu nội tuyến, bạn sẽ nhận được hành vi điền mặc định.

Xem thêm: D3.js tree with odd number of vertices, edges not shown