8

同様の問題を抱えている人を見つけることができず、ドキュメントやその他の問題を読んで問題を解決する手がかりがないので、誰かがここで私を助けてくれることを願っています.

これは私のコードです（ドキュメントの例からコピーされたものです）

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 en activos financieros']' がどのように見えるか疑問に思われるでしょう:

  • console.log から:

[配列2、配列2、配列2 ] 0: 配列2 0: "2010" 1: 0 長さ: 2 proto : 配列[0] 1: 配列2 0: "2011" 1: 29999996.8 長さ: 2 proto : 配列[ 0] 2: 配列2 0: "2012" 1: 79204931.01 長さ: 2 proto : 配列 [0] 長さ: 3 proto : 配列 [0]

  • 変数のより視覚的な例: ここに画像の説明を入力

はい、2010 年、2011 年、2012 年の 3 年間 (x 軸) の 3 つのポイントしかありません。

エラー「折れ線」グラフは次のようになります。

ここに画像の説明を入力

エラーは変数構造にあると思いますが、警告も、問題の原因を突き止める手がかりもありません。実際、両方の軸が正しく設定され、ラベルが付けられており、3 つの点も同様です。奇妙なことは、線が最後の点から最初の点まで閉じられ、いっぱいになっているように見えることです。

:-うーん

前もって感謝します！

4

1 に答える 1

16

<style>その例のセクションが欠落しているようです。これは、最後のポイントから最初のポイントまでを閉じないfill: noneように行に指示するものです。

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

このクラスを使用するように指示しています：

.attr("class", "line")

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

参照:頂点の数が奇数で、エッジが表示されていない D3.js ツリー

于 2013-10-23T17:42:55.830 に答える