javascript - D3JS - 在 setinterval 刷新时更改颜色(也称为 ragging)

Question

希望有人能在这里提供帮助。

我有一些图表使用 setinterval 刷新 500 毫秒。刷新时，它会从 Python 脚本创建的 JSON 文件中加载数据。我希望能够根据这些值对图表中的数据进行 RAG(红色、琥珀色、绿色)。

示例:如果数字小于 10，则将其设为绿色。如果它介于 10 和 20 之间，则为琥珀色，如果高于 20，则为红色。

我以 Mike 的子弹图为例:https://bl.ocks.org/mbostock/4061961

在我的 CSS 中，我添加了颜色 - s0 和 s1 出现在他的示例中:

.bullet .measure.s0 { fill: lightsteelblue; }
.bullet .measure.s1 { fill: steelblue; }
.bullet .measure.s2 { fill: rgb(242, 242, 242); }
.bullet .measure.s3 { fill: #DF4A5E; }
.bullet .measure.s4 { fill: rgb(242, 242, 242); }
.bullet .measure.s5 { fill: #FBAB4A; }
.bullet .measure.s6 { fill: rgb(242, 242, 242); }
.bullet .measure.s7 { fill: #24C678; }

然后在 bullet.js 中，我可以根据数据值调用一个函数，这将选择正确的 CSS 类(此处为第 5-13 行):

            var measure = g.selectAll("rect.measure")
                .data(measurez);

            measure.enter().append("rect")
                .attr("class", function (d, i) {
                    if (d > 20) {
                        return "measure s" + (i + 2);
                    } else if (d > 10) {
                        return "measure s" + (i + 4);
                    } else {
                        return "measure s" + (i + 6);
                    }
                })
                .attr("width", w0)
                .attr("height", height / 2)
                .attr("x", reverse ? x0 : 0)
                .attr("y", height / 4)
                .transition()
                .duration(duration)
                .attr("width", w1)
                .attr("x", reverse ? x1 : 0);

            measure.transition()
                .duration(duration)
                .attr("width", w1)
                .attr("height", height / 2)
                .attr("x", reverse ? x1 : 0)
                .attr("y", height / 4);

这非常有效，当我刷新页面时，颜色会根据 JSON 中的值正确更改，但是随着我的间隔刷新，它不会更新。

我的刷新如下:

setInterval(function () {
    updateData();
}, 500);

function updateData() {
  d3.json("mailboxes.json", function (error, data) {
    d3.select("body")
      .selectAll("svg")
      .select('g')
      .data(data)
      .call(chart.duration(500));
   });
};

这会刷新数据，但显然不会重绘矩形。

我试过为度量添加一个选择器，然后更改类，但这并没有奏效。 (我也试过 SelectAll("svg") 然后 select('rect.measure') 和我能想到的任何组合。

function updateData() {
  d3.json("mailboxes.json", function (error, data) {
    d3.select("body")
      .selectAll("svg")
      .select('g')
      .data(data)
      .call(chart.duration(500));

    d3.select("body")
      .selectAll("rect.measure")
      .data(data)
      .attr("class", function (d, i) {
        if (d > 20) {
          return "measure s" + (i + 2);
        } else if (d > 10) {
          return "measure s" + (i + 4);
        } else {
          return "measure s" + (i + 6);
        }
  });
};

这是一个示例，当 Support JSON 的值低于 10 时加载页面，因此为绿色。该值此后增加到 10 以上，现在应为琥珀色。

Green bullet before page refresh

当我刷新页面时，它按预期工作

Amber bullet after page refresh

我可能只需要像下面这样在刷新中重绘功能，但我已经尝试了一些东西但没有任何效果

redraw()

function redraw(
  measures.blah
)

Answer 1

您必须更改更新类的位置。

在 transition() 之前执行，否则将对类字符串进行插值，得到一个黑色的 rect

        measure.enter().append("rect")
            .attr("width", w0)
            .attr("height", height / 2)
            .attr("x", reverse ? x0 : 0)
            .attr("y", height / 4)
            .transition()
            .duration(duration)
            .attr("width", w1)
            .attr("x", reverse ? x1 : 0);

        measure
            .attr("class", function (d, i) {
                if (d > 20) { return "measure s" + (i + 2); }
                if (d > 10) { return "measure s" + (i + 4); }
                return "measure s" + (i + 6);
            })
            .transition()
            .duration(duration)
            .attr("width", w1)
            .attr("height", height / 2)
            .attr("x", reverse ? x1 : 0)
            .attr("y", height / 4);