5

d3 を使用して積み上げ棒グラフを作成しています。

データは、バーごとに 1 つのオブジェクトを持つ配列です (たとえば、「いいね!」)。次に、各オブジェクトには、バーごとに個々の長方形を駆動する値の配列が含まれます。

data =  [{
          key = 'likes', values = [
            {key = 'blue-frog', value = 1}, 
            {key = 'goodbye', value = 2}
          ]
        }, {
          key = 'dislikes, values = [
            {key = 'blue-frog', value = 3},
            {key = 'goodbye', value = 4}
          ]
        }]

チャートは次のように正常に機能しています。

// Create canvas
bars = svg.append("g");

// Create individual bars, and append data
// 'likes' are bound to first bar, 'dislikes' to second
bar = bars.selectAll(".bar")
        .data(data)        
        .enter()
        .append("g");

// Create rectangles per bar, and append data
// 'blue-frog' is bound to first rectangle, etc.
rect = bar.selectAll("rect")
        .data(function(d) { return d.values;})
        .enter()
        .append("rect");

「いいね: 2」のようなツールチップを四角形ごとに作成したいと思います。これには、バー キーに関する情報を四角形にバインドすることが含まれます。これを行う方法が見つかりませんでした（データを変更する以外）。エレガントなソリューションが見えますか?

また、この質問を最善の方法で説明したかどうかもわかりません。より良いタイトルの提案があれば教えてください。

4

2 に答える 2

12

これを洗練されたソリューションと見なすかどうかはわかりませんが、データの変更を回避できます。

いくつかの重要な「機能」を利用しています。

  • & への参照を自由に取得して選択配列を使用できます (ただし、この配列を使用するには、現在の選択グループを知る必要があります - 最後のポイントを参照してください)。
  • .parentNode プロパティを通じて、親ノードの DOM 要素を取得できます。
  • __data__ プロパティを介して、親ノードの関連データにアクセスできます
  • データ アクセス関数function(d,i){....}は、3 つのパラメーターの形式で指定できます: function(d,i,j){....}ここで、jは現在の選択グループです。

したがって、あなたの例では、選択配列を取得できます。

var selection = bar.selectAll("rect")
  .data(function(d) { return d.values;})
  .enter();

選択配列から、問題のデータを取得できます。

selection
  .append("li")
  .text(function(d,i,j) {
    return selection[j].parentNode.__data__.key; 
  }

この場合のコード スニペットではなく、完全な例を見る方が簡単です。

http://bl.ocks.org/4199266

要旨で述べたように、データアクセサー関数のこの 3 パラメーター形式について読んだことを思い出しますが、私の人生ではどこを思い出せませんか? この「機能」を文書化するソース資料を指摘されることを歓迎します。

于 2012-12-04T00:47:16.193 に答える
-1

ほろ酔いを見たことがありますか？

それはまさにあなたが必要とすることをするかもしれません、そしてそれはあなたのために仕事の大部分をします。たとえば、次のテキスト ブロックを追加するだけです。

$('svg circle').tipsy({ 
  gravity: 'w', 
  html: true, 
  title: function() {
    var d = this.__data__;
var pDate = d.date;
    return 'Date: ' + pDate.getDate() + " " + monthNames[pDate.getMonth()] + " " + pDate.getFullYear() + '<br>Value: ' + d.value; 
  }
});

D3 の例:ほろ酔いツールチップを含む折れ線グラフのすべての適切なデータを含むツールチップを取得します。

于 2012-12-01T21:54:36.047 に答える