过滤数据以有条件地渲染元素

mindparse 发表于 Dev

心智分析

如果存在某个data属性，我将遵循以下条件来尝试有条件地呈现某些文本元素。

问题在于，由于在追加之后调用了过滤器，因此上述帖子中的可接受答案导致添加了空元素。

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。