10

マルチラインシリーズチャートに凡例を追加するにはどうすればよいですか？試しましたが、凡例が表示されません。

ここのブロック：

http://bl.ocks.org/3884955

さまざまな級数がゼロのように同じ点に収束するときに欠陥があります。すべてのラベルが互いにオーバーレイされます。これらのラベルを使用する代わりに、従来の凡例が役立ちます。

これを追加してみました

var legend = svg.append("g")
.attr("class", "legend")
.attr("height", 100)
.attr("width", 100)
.attr('transform', 'translate(-20,50)');    

legend.selectAll('rect')
  .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
  .append("rect")
  .attr("x", width)
  .attr("y", function(d, i){ return i *  20;})
  .attr("width", 10)
  .attr("height", 10)
  .style("fill", function(d) { 
    return color.domain(d3.keys(d[0]).filter(function(key) { return key !== "day"; }));
  });

legend.selectAll('text')
  .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
  .append("text")
  .attr("x", width)
  .attr("y", function(d, i){ return i *  20 + 9;})
  .text(function(d) {
  return d.name;
  });

コードの最後まで、キー名（d.name）はデータのフォーマット方法と一致していますが、表示されません。ある時点で、グラフの右側にすべてのブラックボックスが表示されたため、私は近くにいますが、重要なものが欠落しています。

どんな洞察もありがたい

4

2 に答える 2

13

これは、コードの修正およびリファクタリングされたバージョンです。

    var legend = svg.selectAll('g')
        .data(cities)
        .enter()
      .append('g')
        .attr('class', 'legend');

    legend.append('rect')
        .attr('x', width - 20)
        .attr('y', function(d, i){ return i *  20;})
        .attr('width', 10)
        .attr('height', 10)
        .style('fill', function(d) { 
          return color(d.name);
        });

    legend.append('text')
        .attr('x', width - 8)
        .attr('y', function(d, i){ return (i *  20) + 9;})
        .text(function(d){ return d.name; });

を使用する必要がありますenter()がenter()、exit()メソッドは。と一緒に使用することはできませんdatum()。d3wikiからの引用

selection.datum（[value]）

選択した各要素のバインドされたデータを取得または設定します。selection.dataメソッドとは異なり、このメソッドは結合を計算しません（したがって、EnterおよびExitの選択を計算しません）。

于 2013-02-09T19:13:21.007 に答える
0

.datum（）関数呼び出しの後に.enter（）が欠落しているようです。

legend.selectAll('rect')

  .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })

  .enter() // <======

  .append("rect")

  .attr("x", width)

  .attr("y", function(d, i){ return i *  20;})

  .attr("width", 10)

  .attr("height", 10)

  .style("fill", function(d) { 

    return color.domain(d3.keys(d[0]).filter(function(key) { return key !== "day"; }));

「rect」を追加する前に、enter（）関数を使用する必要があります。正確な説明については、リンクを参照してください。ここをクリックしてください。

于 2013-02-08T18:32:24.510 に答える