d3js折れ線グラフエラー - 奇妙な図解

Question

私は同じような問題を抱えている人を見つけることができず、問題を解決するための手掛かりもなく、ドキュメントやその他の問題を読んでいる人もいます。

：

これは今（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]

• 変数の複数の視覚的例：2010：2011

はい、三年間のためにのみ3点、（X軸）があります2012年

そしてここでエラー "行" チャートはどのようなものか：

私の変数構造は変わっていると思いますが、何が問題なのかを知るための警告やヒントはありません。実際には、両方の軸が正しく設定され、ラベル付けされており、3つの点も正しく表示されています。奇妙なことは、行が最後の点から最初の点まで閉じているように見えていっていることです。

：-mmmmm

ありがとうございます！

Answer 1

その例の<style>セクションが欠落しているようです。 fill: noneは、最初の1に最後の点から閉じるようにラインないを告げるものです：

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

あなたはこのクラスを使用するように指示されています

.attr("class", "line") 

が、「行」doesnの場合参照されたCSSまたはインラインスタイルに存在しない場合は、デフォルトの塗りつぶし動作が得られます。

参照：D3.js tree with odd number of vertices, edges not shown