[d3js时间轴添加当前月份会呈现多个矩形，但不会清除

Question

我正在整理时间线图表-我试图用具有不透明度的矩形块突出显示当前月份。

https://jsfiddle.net/g89kuoe1/3/

    var date = new Date();
    var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
    var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);

    var currentMonth = itemRectsCurrentMonth
        .append('rect')
        .attr('class', 'currentMonth')
        //.selectAll('rect')
        .attr('x', function(d) {
            return x1(firstDay);
        })
        .attr('y', 0)
        .attr('width', function(d) {
            return x1(lastDay) - x1(firstDay);
        })
        .attr('height', function(d) {
            return y1(mainHeight);
        });

    /*
    currentMonth
        //.enter()
        .append('rect')
        .attr('class', 'currentMonth')
        .attr('x', function(d) {
            return x1(firstDay);
        })
        .attr('y', function(d) {
            return y1(mainHeight);
        })
        .attr('width', function(d) {
            return x1(lastDay) - x1(firstDay);
        })
        .attr('height', function(d) {
            return y1(mainHeight);
        })*/

    currentMonth.exit().remove();

-这会产生模糊效果

Answer 1

我已经通过先执行删除操作解决了该问题。

https://jsfiddle.net/a8ps1dk7/

    var date = new Date();
    var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
    var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);

    console.log("firstDay", firstDay);
    console.log("lastDay", lastDay);

    itemRectsCurrentMonth.selectAll(".currentMonth").remove();

    itemRectsCurrentMonth
        .append('rect')
        .attr('class', 'currentMonth')
        //.selectAll('rect')
        .attr('x', function(d) {
            return x1(firstDay);
        })
        .attr('y', 0)
        .attr('width', function(d) {
            return x1(lastDay) - x1(firstDay);
        })
        .attr('height', function(d) {
            return y1(mainHeight);
        });