d3js線條圖錯誤 - 繪製奇怪區域

我一直沒有找到有類似問題的人，也沒有線索解決我閱讀文檔和其他問題的問題，所以我希望有人能幫助我。d3js線條圖錯誤 - 繪製奇怪區域

這是我的代碼（這是從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);

現在，你會想知道如何我變 'list_indicators_3years_absolute [' Gastos恩activos financieros ']' 的樣子：

從的console.log：

[陣列2，陣列2，陣列2] 0：陣列2 0：「2010」 1:0 長度：2 原：數組[0] 1：陣列2 0：「2011」 1：29999996.8 長度：2 原：數組[0] 2：陣列2 0：「2012」 1：79204931.01 長度：2 原：數組[0] 長度：3 原：數組[0]

可變的多個視覺例如：

是，僅存在3個點，實現三年（x軸）：2010，2011 ，2012

這裏的錯誤「線」圖的樣子：

enter image description here

我認爲錯誤出現在我的變量結構中，但我沒有收到任何警告，或者找出問題所在。實際上，兩個軸都被正確設置和標記，以及三個點。奇怪的是，這條線似乎從最後一個點到第一個點關閉了，並且已經填滿了。

：-mmmmm

在此先感謝！

來源

2013-10-23 miguelfg

看起來你錯過了該示例的<style>部分。該fill: none就是告訴行不從上次點接近第一個：

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

你告訴它使用這個類：

.attr("class", "line")

但如果「行」沒有按不存在於引用的CSS或內聯樣式中，您將獲得默認的填充行爲。

參見：D3.js tree with odd number of vertices, edges not shown

來源

2013-10-23 17:42:55 explunit

：-OOOOOOOOOOOOOOOOOOOOOOOOOOOOOO – miguelfg

西班牙語詞彙是非常多樣化來形容我現在的感受... – miguelfg

並非常感謝你！ – miguelfg

d3js線條圖錯誤 - 繪製奇怪區域

回答

相關問題