Question

我使用d3绘制矩阵，根据其值在每个单元格中填充颜色。功能如下：

var redVal = 5000,
    greenVal = 2000;

var color = function (rtt) {
    if (rtt === undefined) {
        return "white";
    }

    if (rtt <= greenVal) {
        return "green";
    } else if (rtt <= redVal) {
        return "yellow";
    } else {
        return "red";
    }
};

heatMap.data(matrix, function (d) { return d.x + ":" + d.y; })
       .style("fill", function (d) { return color(d.m_Item3); })

现在我更改了redVal和greenVal，如何强制每个单元格更新其填充颜色？我可以用这样的东西来实现：d3.selectAll().data(matrix).style("fill", function (d) { return color(d.m_Item3); })，但我期待更优雅的方式。

Answer 1

好吧，如果你要求更多优雅的方式，你应该使用一个比例，如scaleThreshold：

Ajax

根据API：

值通常是数字，但任何自然排序的值（如字符串）都可以使用;阈值比例可用于编码任何有序类型。如果比例范围内的值数为N + 1，则比例域中的值数必须为N.

因此，我们在域中有2个值，在范围内有3个值。如果为比例传递的值小于2000，则它将返回Javascript。在2000到5000之间将返回Django view，超过5000将返回var color = d3.scaleThreshold() .domain([2000, 5000]) .range(["green", "yellow", "red"]);。

之后，使用ternary operator检查green：

yellow

请参阅此演示，了解阈值比例的工作原理：

red

undefined

编辑：要更新矩形的颜色，请使用您的变量更改.style("fill", function (d) { return d ? color(d) : "white"});并再次填写该行：

var color = d3.scaleThreshold()
    .domain([2000, 5000])
    .range(["green", "yellow", "red"]);

console.log("the color for 400 is " + color(400));
console.log("the color for 1500 is " + color(1500));
console.log("the color for 3200 is " + color(3200));
console.log("the color for 7000 is " + color(7000));

Answer 2

我找到了解决方案，也许不是最优雅的方式：

$("#green").change(function () {
    greenVal = $("#green").val();
    redVal = $("#red").val();
    if (greenVal > redVal) {
        greenVal = redVal;
        $("#green").val(greenVal);
    }

    // call .style again with same callback to do refresh.
    d3.selectAll("rect").style("fill", function (d) { return color(d.m_Item3); });
});

如何强制更新d3中现有元素的填充颜色？

2 个答案: