0

を使用して、選択範囲をフィルタリングして、以下の深さでd3.layout.tree()リンクするリンク線のみを含めようとしていますnodesleafDepth

次の行は、私がそれをやろうとしている方法です:

links.enter().filter(function(d){return d.target.depth < leafDepth;})....

フィルターなしでグラフは正常に描画されますが、フィルターを追加すると、コンソールに次のエラーが表示されます。

Uncaught TypeError: Cannot read property 'depth' of undefined

d.targetの割り当てで、正常にアクセスしていることがわかりますlinkKey。d.targetだから、後ですべての要素に存在することがわかっているものを確認しようとすると、なぜ undefinedなのかわかりませんd.target.depth?? アイデンティティ関数を使用してデータを「ピックアップ」すると何が起こるかに関して、何かが欠けていますか??var link = links.selectAll("path.treeline").data( function(d){return d;} , linkKey);

繰り返しますが、行を追加するまで、これはすべて正常に機能します.filter(function(d){return d.target.depth < leafDepth;})

これが私のグラフ描画関数の主要部分です（それに続く一連のゲッター/セッターを除く）

Tree = function () {

    var width = 1000,  //default width
        height = 1000, //default height
        left = 0,
        top = 0,
        leafDepth = 5, // depth at which leaf nodes are at
        leafClick = function (d){return console.log(d);},
        linkKey, // key function for links
        pathGenerator = d3.svg.diagonal().projection( function(d) {  
                            return [d.x, height-d.y]; }),
        childrenKey = function(d) { 
                            return (!d.values || d.values.length === 0) ? null : d.values; },
        linkKey = function(d) { return d.source.key+"_"+d.target.key; }
    ;

    function chart(selection) {
        selection.each(function (d) {

            // setup layout
            var tree = d3.layout.tree()
                .size([width,height])
                .children( function(d) {
                    return (!d.values || d.values.length === 0) ? null : d.values;
                });

            var nodeData = tree.nodes(d);
            var linkData = tree.links(nodeData);

            // 'this' is the selection
            var links = d3.select(this).selectAll("g#links")
                .data( [linkData] );

            links.enter()
                .append("g")
                .attr("transform", "translate("+left+", "+top+")")
                .attr("id","links");

            var linkKey = function(d) { return d.source.key+"_"+d.target.key; }            
            var link = links.selectAll("path.treeline")
                .data( function(d){return d;} , linkKey);

            link.enter()
                .filter(function(d){return d.target.depth < leafDepth;}) // PROBLEM HERE !!
                .append("svg:path")
                .attr("class", "treeline")
                .attr("d", pathGenerator);

            link.transition()
                .attr("d", pathGenerator);

            link.exit()
                .remove();    

        });

        return chart;
    };

    // a bunch of getter/setters for the vars defined at top

    return chart; // this is using a version of the re-usable chart pattern by the way 
}
4

1 に答える 1

0

フィルターをデータ割り当てに移動すると機能しますが、それはそれらが から完全に削除されることを意味しますjoin。

var linkLeafFilter = function(d){return d.target.depth < leafDepth;}
var link = links.selectAll("path.treeline")
                .data( function(d){return d.filter(linkLeafFilter);} , linkKey);
于 2012-10-23T00:28:26.123 に答える