4

フォーチュン500データのインタラクティブなバブルチャートを作成しています。選択範囲を減らしようとしていますが、期待どおりに機能しない理由がわかりません。

var bubble = d3.layout.pack()
    ...

d3.json("js/data/fortune2009.json", function(json) {

    var node = svg.data([json]).selectAll("g.node")
        .data(bubble.nodes); // filter here?

    node.enter()
        .append("g")
        .attr("class", "node")
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

    node.append("circle")
        .attr("r", function(d) { return d.r; })
        .attr("class", function(d) { return "q" + color(d.Profit) + "-9"; });

    node.filter(function(d) { return !d.children; })
        .append("text")
        .attr("dy", ".3em")
        .style("text-anchor", "middle")
        .text(function(d) { return d.Company.substring(0, d.r / 3); });
});

JSONデータは次のようになります。

{
    "children":[
    {
        "Year" : "2009",
        "Rank" : "1",
        "Revenue" : "442",
        "Profit" : "851.00",
        "Company" : "Exxon Mobil"
    },
    ....
}

親ノードを削除したい。ここで説明するようなフィルター関数を使用しようとしています。

.filter(function(d) { return !d.children; })

しかし、選択を初期化するフィルター関数を追加すると、node何も起こらないか、エラーが発生します。

（フィルターは、テキストを追加する前に適用すると機能します）

どうすればこれを解決できますか？

更新：これが私の問題を示すJSFIDDLEhttp : //jsfiddle.net/B9w4N/8/です。

ここに画像の説明を入力してください

4

2 に答える 2

6

あなたは正しい考えを持っていました。(テキストが作成される場所に加えて) 円が作成される場所にフィルターを適用する必要がありました。

node
    .filter(function(d) { return !d.children; })
    .append("circle")
    .attr("r", function(d) { return d.r; });

JSFiddle のフォークされたバージョン

于 2013-01-28T17:46:18.640 に答える
4

レイアウトが出力する配列をフィルタリングできます。

var node = svg.data([fortune2009]).selectAll("g.node")
    .data(function(d) { 
        return bubble.nodes(d).filter(function(v) {
            return v.depth > 0;
        });
    });

更新されたフィドルを参照してください: http://jsfiddle.net/B9w4N/10/

于 2013-01-29T01:39:05.020 に答える