0

D3初心者ですのでよろしくお願いします。

d3.js で並列グラフを作成しようとしています。「g」（グループ）の中に「rect」（長方形のsvg）を追加しようとして少し行き詰まっています。json データの形式が間違っているかどうかはわかりません。または、基本的なステップが欠けている場合。

Json オブジェクト = データ;

var data = [
 {
  dontknow: 3,
  neutral: 0,
  optimistic: 62,
  pessimistic: 15,
  veryoptimistic: 14,
  verypessimistic: 6,
  year: 2013
 },
 {
  dontknow: 10,
  neutral: 4,
  optimistic: 42,
  pessimistic: 55,
  veryoptimistic: 64,
  verypessimistic: 5,
  year: 2013
 }
]

そして、私のコードは次のようになります。

var svg = d3.select("#graph5")
.append("svg")
.attr("width", w)
.attr("height", h);

//Create groups
var g = svg.selectAll('g')
.data(data)
.enter()
.append('g');

//Add rectangles to each g
var rect = g.selectAll("rect")
   .data(function(d){ return d })
   .enter()
   .append("rect")
   .attr('width', function(d){ d.year });

SVG と 'g' 要素は正しく作成されているように見え、正しいデータが 'g' に関連付けられていますが、最後の rect 呼び出しは機能していないようです。

何か案は？

ありがとう

4

1 に答える 1

0

オブジェクト キーが問題を引き起こしているようです。inbuild 'd3.values(d)' 関数を利用することで、長方形を作成することができました。

コードは次のとおりです (2 行目の違いに注意してください)。

var rect = g.selectAll("rect")
 .data(function(d){ return d3.values(d) })
 .enter()
 .append("rect")
 .attr('width', function(d,i){ console.log(d); return d });
于 2013-06-13T16:45:01.047 に答える