d3 js добавление временной шкалы текущего месяца отображает несколько прямоугольников и не очищает - PullRequest
Новая
       58

d3 js добавление временной шкалы текущего месяца отображает несколько прямоугольников и не очищает

0 голосов
/ 29 января 2020

Я составляю график времени, и я попытался выделить текущий месяц прямоугольным блоком с непрозрачностью.

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

- это создает эффект размытия

enter image description here

1 Ответ

1 голос
/ 29 января 2020

Я решил проблему, выполнив сначала удаление.

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