D3:创建一个连续的色标，其中包含用于范围的许多字符串/输入并动态更改域的值 [英] D3: Create a continuous color scale with many strings/inputs for the range and dynamically changing values of the domain

问题描述

我正在尝试为热图创建线性色标.我想对色标进行选择以使用大量特定颜色，其中第一种颜色对应于数据的最小值，而最后一种颜色应与数据的最大值对应.

I am trying to create a linear color scale for a heatmap. I want to color scale to go through a large set of specific colors, where the first color corresponds to the min of the data and the last color should be given to the max of the data.

我知道我可以通过在最小值和最大值之间给域17值来做到这一点，但是如果用户能够更改数据集(从而更改颜色)，我不知道如何动态地做到这一点热图)

I know that I can do this by also giving the domain 17 values in between the min and max, but I do not know how to do this dynamically if the user is able to change the dataset (and thus change the coloring of the heatmap)

本质上，我想关注，但是我知道它不起作用

In essence I would like to following, but I know it does not work

var colorScale = d3.scale.linear()
   .range(["#6363FF", "#6373FF", "#63A3FF", "#63E3FF", "#63FFFB", "#63FFCB",
           "#63FF9B", "#63FF6B", "#7BFF63", "#BBFF63", "#DBFF63", "#FBFF63", 
           "#FFD363", "#FFB363", "#FF8363", "#FF7363", "#FF6364"])
   .domain([d3.min(dataset, function(d) {return d;}),
            d3.max(dataset, function(d) {return d;})]);

任何人都可以告诉我我需要放入域"以使其正常工作吗?

Can anybody please tell me what I need to put into 'domain' to make it work?

我确实找到了可以满足我需求的东西.使用R，我使用designer.colors函数从上面计算了17种颜色之间的256种颜色，并将其放入范围内.这确实给人以连续的色阶感觉

I did find something that does what I want. Using R I calculated 256 colors in between the 17 from above with the designer.colors functions and put this into the range. This does give the feeling of a continous color scale

var colorScale = d3.scale.linear()
    .range(["#6363FF", "#6364FF", "#6364FF", "#6365FF",
            "... several other lines with color codes ..."
            "#FF6764", "#FF6564", "#FF6464", "#FF6364"])
    .domain(d3.range(1,257));

var quantize = d3.scale.quantile()
   .range(d3.range(1,257))
   .domain([d3.min(dataset, function(d) {return d;}), 
            d3.max(dataset, function(d) {return d;})]);

现在我可以用这种方式使用颜色

Now I can use the color in this fashion

colorScale(quantize(dataset))

但是我想知道是否也可以用更少的代码行来完成?

But I'm wondering if this can also be done in less lines of code?

推荐答案

您想要分解问题.首先为您的热图定义一个比例，将0-1映射到您的颜色.然后定义第二个(动态)比例，将您的数据集映射到0-1.然后，您可以组合比例尺以绘制形状.

You want to split the problem up. First define a scale for your heatmap that maps 0-1 to your colours. Then define a second (dynamic) scale that maps your dataset to 0-1. You can then combine the scales to paint your shapes.

var colours = ["#6363FF", "#6373FF", "#63A3FF", "#63E3FF", "#63FFFB", "#63FFCB",
               "#63FF9B", "#63FF6B", "#7BFF63", "#BBFF63", "#DBFF63", "#FBFF63", 
               "#FFD363", "#FFB363", "#FF8363", "#FF7363", "#FF6364"];

var heatmapColour = d3.scale.linear()
  .domain(d3.range(0, 1, 1.0 / (colours.length - 1)))
  .range(colours);

// dynamic bit...
var c = d3.scale.linear().domain(d3.extent(dataset)).range([0,1]);

// use the heatmap to fill in a canvas or whatever you want to do...
canvas.append("svg:rect")
  .data(dataset)
  .enter()
  // snip...
  .style("fill", function(d) {
     return heatmapColour(c(d));

此外，您可以使用d3.extent函数一次性获取数据集的最小值和最大值.

Plus you can use the d3.extent function to get the min and max of the dataset in one go.

这篇关于D3:创建一个连续的色标，其中包含用于范围的许多字符串/输入并动态更改域的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！