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

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

    });