1

凡例をプロットに追加し、新しいタイプの がプロットされる遷移に続いて凡例を更新する方法を検討してきました。トラブルシューティングを行うことができなかった 2 つの問題に遭遇しました。

ブロックはこちら http://bl.ocks.org/natemiller/df4b96809580fe7d00a6

サンプルの JSON データセットには、いくつかの異なる変数 (温度、pH、名前、y など) が含まれており、私が開発しようとしているのは、x 軸にプロットされる変数と、データの塗りつぶしを決定する変数を変更するプロットです。ボタンがクリックされたときのポイント。これまでのところ、x 軸が変更され、ポイントが適切に移動し、凡例の色が適切に変更されています。ただし、2 つの問題があります。

  1. 凡例テキスト (ラベル) がありません。なぜそれらが表示されていないのかは明確ではありませんが、私が見逃している小さな詳細があると思います. それについて何か助けていただければ幸いです。

  2. データセットでわかるように、同じ場所、同じ pH (7.2,8.0,7.2,7.2,8.0,8.0,7.6)、または同じ温度 (30、25、25) の「サンプル」がいくつかあります。 、30、30、25、25)。そのため、ここのコードのような凡例を生成すると...

    varlegend = svg.selectAll('rect')
   .data(data)
   .enter().append("rect")
   .attr('x', width-50)
   .attr('y', function(d,i) {return i*20;})
   .attr('width', 10)
   .attr('height', 10)
   .style('fill', function(d) { 
     return color(d.name);
   });

...そして d.name を使用して色を設定すると、7 つの長方形 (値ごとに 1 つ) が得られます。塗りつぶしの色がサイトまたは pH によって設定されている場合は 3 つの長方形が必要です (塗りつぶしが温度によって設定されている場合は 2 つ)。一部の値が重複している場合。これを行う手段はありますか？私は d3.nest を検討しましたが、移行を開始するときに、データを名前ではなく pH でネストする必要があります (したがって、塗りつぶしは d.pH によって設定されます)。これについてコメントをいただければ幸いです。あまりにも複雑な方法でこれを行っていますか? この同じ目標を達成するために考えるべきもっと簡単な方法はありますか?

あなたの時間と助けに感謝します, ネイト

4

2 に答える 2

2

2-.data値を指定すると、一意の識別値を返す関数を指定することもできます。このようなもの：

varlegend = svg.selectAll('rect')
   .data(data, function(d) { return d.name })
//...

selection.dataのドキュメントから：「データを要素に結合する方法を制御するために、キー関数を指定できます。これにより、デフォルトのインデックスによる動作が置き換えられます。」

1-テキストが表示されないことに関して、問題は「ストローク」属性の欠落にあると思います。あなたはおそらく白地に白を持っています。ただし、考慮すべき別のアプローチは、「g」タグを使用して、rectとtextの両方を保持することです。このようなもの：

var legend = svg.selectAll('.legend')
      .data(data, function(d) { return d.name; })
      .enter().append('g')
      .attr('class', 'legend')
      .attr('ID', function(d) { return d.name })
      .attr("transform", function(d,i) {
        return "translate(" + 800 + "," + i*20 + ")";
      });

legend.append("rect")
      .attr('width', 10).attr('height', 10)
      .style('fill', function(d) { 
        return color(d.name);
      });

legend.append("text")
      .attr('x', 25).attr('y', 10)
      .text(function(d) { return d.name; })
      .attr("font-family","sans-serif")
      .attr("font-size","11px")
      .attr("stroke","black");
于 2013-03-05T23:52:23.207 に答える
1

質問 1: SVG の四角形にテキストを追加できないため、テキストが表示されません。つまり、rect はコンテナーのように振る舞うことはできません。あなたの問題は、あなたが指定したことです。legend = svg.selectAll('rect')つまり、以下のことは機能しlegend.append("text")ません。したがって、解決策は explunit が示唆するとおりです。データをg（グループ）に結合し、rectとテキストをそのグループに個別に追加します。

質問 2: 1 つの方法は、最初に重複するエントリを削除する配列を作成し、次にその配列を凡例のデータ結合に使用することです。次に例を示します。

var legendData = d3.values(data.map(function (d) { return d.temp; }))

var unique = legendData.filter(function (elem, pos) {
   return legendData.indexOf(elem) == pos; })

これはunique、以下を含む配列です[30, 25]。

頭痛を和らげるために、.enter() と .transition() のすべてを、データを渡すことができる単一の再描画関数に入れることをお勧めします。したがって、最初に凡例データを pH または温度でフィルター処理してから、新しく作成した配列を redraw 関数に渡すと、凡例が遷移し、古い/不要な要素も削除されます。再描画関数をレイアウトする方法については、一般更新パターンに関する Mike Bostock の投稿を参照してください。

于 2013-03-06T04:21:31.340 に答える