Question

使用d3.layout.tree()我尝试过滤选择内容，仅包含链接到nodes的链接线，其深度小于leafDepth

以下是我尝试这样做的方法：

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

没有过滤器，图表绘制得很好，但添加过滤器后，我在控制台中出现以下错误：

Uncaught TypeError: Cannot read property 'depth' of undefined

您可以在d.target的作业中看到我正在访问linkKey。所以当我尝试检查d.target我知道所有元素存在时，我不明白为什么d.target.depth未定义？我是否遗漏了一些关于当我使用身份功能获取数据时会发生什么？ var link = links.selectAll("path.treeline").data( function(d){return d;} , linkKey);

再一次这一切都正常，直到我添加行.filter(function(d){return d.target.depth < leafDepth;})

这是我的绘图功能的主要部分（不包括随后的一堆getter / setter）

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 
}

Answer 1

将过滤器移动到数据分配工作，但这意味着它们已从join完全删除。

var linkLeafFilter = function(d){return d.target.depth < leafDepth;}
var link = links.selectAll("path.treeline")
                .data( function(d){return d.filter(linkLeafFilter);} , linkKey);

如果它们链接到深度超过某个值的节点，则从d3.layout.tree（）过滤行

1 个答案: