Question

我正在尝试为我的热图可视化添加颜色选项。我在开头有一个预定义的颜色数组，我画这样的矩形：

plotChart.selectAll(".cell")
                    .data(data)
                    .enter().append("rect")
                    .attr("class", "cell")
                    .attr("x", function (d) { return x(d.timestamp); })
                    .attr("y", function (d) { return y(d.hour); })
                    .attr("width", function (d) { return x(d3.timeWeek.offset(d.timestamp, 1)) - x(d.timestamp); })
                    .attr("height", function (d) { return y(d.hour + 1) - y(d.hour); })
                    .attr("fill", function (d) { return colorScale(d.value); });

当我点击下拉菜单中的链接时，我会这样做：

$(".colorMenu").click(function (event) {
        event.preventDefault();
        // remove # from clicked link
        var addressValue = $(this).attr("href").substring(1);
        // get color scheme array
        var newColorScheme = colorDict[addressValue];
        // update color scale range
        colorScale.range(newColorScheme);
        // here I need to repaint with colors
});

我的色标是分位数比例，所以我不能使用反转函数来查找每个矩形的值。我不想再次读取数据，因为这会带来负担，所以如何更改矩形的填充颜色？

Answer 1

我不想再次阅读数据......

嗯，您不需要再次阅读数据。一旦数据绑定到元素，数据就会保留在那里，除非你改变/覆盖它。

所以，这可以简单地完成：

.attr("fill", d => colorScale(d.value));

查看此演示：

＆＃13;

var width = 500,
    height = 100;

var ranges = {};

ranges.range1 = ['#f7fbff','#deebf7','#c6dbef','#9ecae1','#6baed6','#4292c6','#2171b5','#08519c','#08306b'];

ranges.range2 = ['#fff5eb','#fee6ce','#fdd0a2','#fdae6b','#fd8d3c','#f16913','#d94801','#a63603','#7f2704'];

ranges.range3 = ['#f7fcf5','#e5f5e0','#c7e9c0','#a1d99b','#74c476','#41ab5d','#238b45','#006d2c','#00441b'];

ranges.range4 = ['#fff5f0','#fee0d2','#fcbba1','#fc9272','#fb6a4a','#ef3b2c','#cb181d','#a50f15','#67000d'];

var color = d3.scaleQuantile()
    .domain([0, 15])
    .range(ranges.range1);

var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

var data = d3.range(15);

var rects = svg.selectAll(".rects")
    .data(data)
    .enter()
    .append("rect");

rects.attr("y", 40)
    .attr("x", d => d * 25)
    .attr("height", 20)
    .attr("width", 20)
    .attr("stroke", "gray")
    .attr("fill", d => color(d));

d3.selectAll("button").on("click", function() {
    color.range(ranges[this.value]);
    rects.attr("fill", d => color(d))
})

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<button value="range1">Range1</button>
<button value="range2">Range2</button>
<button value="range3">Range3</button>
<button value="range4">Range4</button>

＆＃13;

动态改变热图的色标

1 个答案: