Question

我遇到过这个问题 - Filter data in d3 to draw either circle or square

如果存在某个数据属性，我将跟随尝试有条件地呈现某些文本元素。

问题是上面帖子上接受的答案会导致添加空元素，因为在追加后调用过滤器。

我试图在追加调用之前过滤数据：

layers.selectAll('text')
    .data(function(d) {
        return d.dataPointValues;
    })
    .filter(function(d){
        return angular.isDefined(d.pointLabel);
    })
    .enter()
    .append('text')
    .text(function(d) {
        return d.pointLabel;
    })
    .attr('x', function(d) {
        return x(d.pointKey) + x.rangeBand() / 2;
    })
    .attr('y', function(d) {
        return y(d.y0 + d.pointValue) - 5;
    })
    .attr('class', 'data-value');

但我从d3收到错误：

TypeError：layers.selectAll（...）。data（...）。filter（...）。enter不是功能

如何只使用过滤器获取必要数量的文本元素，或者我应该在这里使用不同的方法？

Answer 1

您可以尝试对数据函数内部的数据应用过滤器，如下所示

layers.selectAll('text')
.data(function(d){d.dataPointValues.filter(function(dp){ return angular.isDefined(dp.pointLabel); }})
.enter()
.append('text')
.text(function(d) {
    return d.pointLabel;
})
.attr('x', function(d) {
    return x(d.pointKey) + x.rangeBand() / 2;
})
.attr('y', function(d) {
    return y(d.y0 + d.pointValue) - 5;
})
.attr('class', 'data-value');

Answer 2

你的代码是borking因为d3的selection.filter没有考虑或保留选择的输入或退出属性，你试图链接到下一个 - 加上没有现有元素，无论如何，在您遇到该错误之前，过滤器将为空。

https://github.com/mbostock/d3/blob/master/src/selection/filter.js

你需要先添加元素，实际上这意味着d3的选择.filter适合过滤以挑选某些样式/过渡等的现有元素，而不是决定是否将它们添加到DOM或不首先是DOM。例如下面的脚本将以红色绘制节点，其pointValue为＆gt; 5，但他们都会被添加。

.enter()
.append('text')
.text(function(d) {
    return d.pointLabel;
})
.filter(function(d){
    return d.pointValue > 5;
})
.style ("stroke", "red");

正如另一个答案所说，过滤实际数据是否可以决定数据点是否应该可视化。

过滤数据以有条件地呈现元素

2 个答案: