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

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 始终引用相同的事物。因此，您只能使用 html 方法进行“输入”选择。

要更改卡，您必须重新分配它:

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