Question

有没有办法为元素和元素数组获得线性颜色输出？

现在我正在使用以下内容，这不是很漂亮，风险也在于我的阵列中的元素可能比我在这里的颜色多，所以我只需要在这里添加更多颜色。

我现在正在过滤掉一些元素和＆＃34; theExports＆＃34; array基本上看起来像[＆＃34; element1＆＃34;，＆＃34; element2＆＃34;，＆＃34; element3＆＃34;，...]并且是一个字符串数组。

var color = d3.scaleOrdinal()
        .domain([theExports])
        .range(["#e69a61", "#9817ff", "#18c61a", "#33b4ff", "#c9167e", "#297853", "#d7011b", "#7456c7", "#7e6276", "#afb113", "#fd879c", "#fb78fa", "#24c373", "#45bbc5", "#766b21", "#abad93", "#c19ce3", "#fd8f11", "#2f56ff", "#307a11", "#b3483c", "#0d7396", "#94b665", "#9d4d91", "#b807c8", "#086cbf", "#a2abc5", "#a35702", "#d3084b", "#8c6148", "#fa82ce", "#71be42", "#2bc0a0", "#b64064", "#d09fa2"]);

无论哪种方式，它都不是非常漂亮或非常实用，特别是如果我想调整颜色。现在我认为如果我设法绘制它与线性色标，或者甚至更好地踩3到4种颜色，如[＆＃34;黄色＆＃34;，＆＃34;红色＆＃34>它将是理想的;，＆＃34;绿色＆＃34;，＆＃34;蓝色＆＃34;]。

使用线性而不是序数没有功能，或者我做错了。

如果有人有另一种解决方案，即使它不是我要求的，那么我也很感激，因为我目前的解决方案看起来并不太好。

Answer 1

由于您的数据是字符串（显然是分类变量）的数组，因此最佳选择是使用序数比例，就像您现在正在做的那样。

但是，可以使用与您的数据类似的线性刻度。为了使它工作，你将把每个元素的索引而不是元素本身传递给比例（所以，你必须要记住数组中元素的顺序）。

这样的事情：

var scale = d3.scaleLinear()
    .domain([0, theExports.length - 1])
    .range(["yellow", "green"]);

这是一个演示，数据是这个数组：

["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"]

根据元素的索引，我们得到不同的颜色：

var data = "abcdefghij".split("");

var scale = d3.scaleLinear()
  .domain([0, data.length - 1])
  .range(["yellow", "green"]);

var divs = d3.select("body").selectAll(null)
  .data(data)
  .enter()
  .append("div")
  .style("background-color", function(d) {
    return scale(data.indexOf(d))
  })

div {
  width: 20px;
  height: 20px;
  margin: 2px;
  display: inline-block;
}

<script src="https://d3js.org/d3.v4.min.js"></script>

增加阵列......

["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s"]

......不会打破规模：

var data = "abcdefghijklmnopqrs".split("");

var scale = d3.scaleLinear()
  .domain([0, data.length - 1])
  .range(["yellow", "green"]);

var divs = d3.select("body").selectAll(null)
  .data(data)
  .enter()
  .append("div")
  .style("background-color", function(d) {
    return scale(data.indexOf(d))
  })

div {
  width: 20px;
  height: 20px;
  margin: 2px;
  display: inline-block;
}

<script src="https://d3js.org/d3.v4.min.js"></script>

最后，您可以设置中点：

var scale = d3.scaleLinear()
    .domain([0, (data.length - 1)/2, data.length - 1])
    .range(["yellow", "blue", "green"]);

var data = "abcdefghijklmnopqrs".split("");

var scale = d3.scaleLinear()
  .domain([0, (data.length - 1)/2, data.length - 1])
  .range(["yellow", "blue", "green"]);

var divs = d3.select("body").selectAll(null)
  .data(data)
  .enter()
  .append("div")
  .style("background-color", function(d) {
    return scale(data.indexOf(d))
  })

div {
  width: 20px;
  height: 20px;
  margin: 2px;
  display: inline-block;
}

<script src="https://d3js.org/d3.v4.min.js"></script>

d3.js：有没有办法为元素数组获得线性颜色输出？

1 个答案: