1

次のデータ変数があります。

  [Object { score="2.8",  word="Blue"}, Object { score="2.8",  word="Red"}, Object { score="3.9",  word="Green"}]

D3グラフhttp://bl.ocks.org/3887051の一部を変更して、データセットの「単語」のリストとなる凡例を表示することに興味があります。

凡例スクリプトは次のようになります（上記のリンクから）：

var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; });

var legend = svg.selectAll(".legend")
  .data(ageNames.slice().reverse())
.enter().append("g")
  .attr("class", "legend")
  .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

legend.append("rect")
  .attr("x", width - 18)
  .attr("width", 18)
  .attr("height", 18)
  .style("fill", color);

legend.append("text")
  .attr("x", width - 24)
  .attr("y", 9)
  .attr("dy", ".35em")
  .style("text-anchor", "end")
  .text(function(d) { return d; });

データから設定された「単語」を表示するようにageNames関数を変更するにはどうすればよいですか？彼らがd3.keysをどのように利用しているかはわかりません。それを行う別の方法はありますか？

4

1 に答える 1

1

これは多かれ少なかれ機能するはずですが、単語を正しい色に正しくマッピングするために、reverse()(元の例のように) の要素を再配置する必要がある場合があります。wordsグラフをどのように実装したかによって異なります。

var words = yourDataArray.map(function(entry) { return entry.word; });

var legend = svg.selectAll(".legend")
  .data(words)
// The rest stays the same
于 2012-11-15T20:09:57.010 に答える