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

我遇到过这样的情况-

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

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

我正在尝试在进行追加调用之前过滤数据，如下所示：

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不是 作用

---

如何使用过滤器仅获取附加的必要数量的文本元素，或者在此处使用不同的方法？

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

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');

---

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

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');

---

<> p>你的代码是因为D3的选择。过滤器不考虑或保留选择的输入或退出属性，你试图链接到下一个-加上没有现有的元素，过滤器将是空的，然后你击中那个错误无论如何。< / P>

您需要首先附加元素，这实际上意味着d3的selection.filter适用于筛选，以便为某些样式/转换等挑选现有元素，而不是首先决定它们是否添加到DOM中。e、 下面的脚本将在pointValue大于5的位置以红色绘制节点，但它们都将被添加

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

---

所以，另一个答案是：如果要决定数据点是否应该被可视化，请过滤实际数据。

< p>您的代码是Burg，因为D3的选择.F筛选不考虑或保留选择的输入或退出属性，你正试图链接到下一个-加上没有现有的元素过滤器将是空的之前，你点击该错误

您需要首先附加元素，这实际上意味着d3的selection.filter适用于筛选，以便为某些样式/转换等挑选现有元素，而不是首先决定它们是否添加到DOM中。e、 下面的脚本将在pointValue大于5的位置以红色绘制节点，但它们都将被添加

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

---

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

在绑定数据之前过滤数据怎么样？您可以执行类似于

.data（函数（d）{returnd.dataPointValues.filter（函数（v）{return angular.isDefined（v.pointLabel）；}）；}）

的操作。这使用了标准的JS

Array.prototype.filter（）

方法。请看，其中的共识是“不，他们不应该”！好的，谢谢，以后的问题我会记住这一点：）在绑定数据之前过滤数据怎么样？您可以执行类似于

.data（函数（d）{returnd.dataPointValues.filter（函数（v）{return angular.isDefined（v.pointLabel）；}）；}）

的操作。这使用了标准的JS

Array.prototype.filter（）

方法。请看，其中的共识是“不，他们不应该”！好的，谢谢，以后的问题我会记住这一点：）@mindparse在接受它之前你真的试过吗？现在的写法很可能是错的。调用

data（）

中的第一个

d

未定义或引用了外部范围中的其他值。我想，它应该放在回调中，就像我在回答你的问题时提到的那样。@altocumulus，你是对的，我最初错过了回调。我已经更新了答案。@mindparse在接受之前你真的试过了吗？现在的写法很可能是错的。调用

data（）

中的第一个

d

未定义或引用了外部范围中的其他值。我想，它应该放在回调中，就像我在回答你的问题时提到的那样。@altocumulus，你是对的，我最初错过了回调。我已经更新了答案。谢谢你的额外解释