Question

尝试通过根据单击的类别过滤卡片来更新卡片。卡已更新，但更新后的卡上的按钮不起作用。经过测试后，很明显该按钮不仅在以前的卡片出现的地方不起作用。如果先前的筛选器上没有卡片，而新卡片出现在空白处，则按钮会起作用。这是我的代码。怎么了？它能正确更新我的卡吗？

var cards = d3.select('.card-columns')
    .selectAll('.card')
    .data(
        data1.filter(function(d) {
            return (status == "" || status == d.status) && (category == "" || category == d.category)
        }));

cards.exit().remove();

cards.enter()
    .append("div")
    .classed("card animated fadeInUp", true)
    .merge(cards)
    .style("border-top", function(d) {
        return "6px solid" + dateColor(d.status)
    })
    .html(function(d, i) {
        return drawCard(d, i);
    });

Answer 1

请记住，D3选择是不可变的。这意味着cards始终引用相同的内容，而不管使用merge。因此，您只能使用html方法进行“输入”选择。

要更改cards，您必须重新分配它：

cards = cards.enter()
    //etc...
    .merge(cards)
    //etc...

以下是整个代码段的显示方式：

var cards = d3.select('.card-columns')
    .selectAll('.card')
    .data(data1.filter(function(d) {
        return (status == "" || status == d.status) && (category == "" || category == d.category)
    }));
cards.exit().remove();
cards = cards.enter()
    .append("div")
    .classed("card animated fadeInUp", true)
    .merge(cards)
    .style("border-top", function(d) {
        return "6px solid" + dateColor(d.status)
    })
    .html(function(d, i) {
        return drawCard(d, i);
    });

更新卡片类别时按钮不起作用

1 个答案: