使用 d3.js 创建具有径向渐变的颜色范围

Question

我正在尝试通过遍历十六进制代码颜色数组并创建 svg 渐变定义来使用渐变构建颜色范围，然后将渐变 url 插入另一个数组。见下文。

var color_chart = d3.select("body")
                          .append("svg")
                          .attr("width", 1000)
                          .attr("height", 500);

var numRange = [1, 1.5, 2, 2.5, 3, 4, 5, 7, 10, 15, 25, 45, 70, 100, 150, 240],
    colorRange = ["#0500FF","#0100FF","#0022FF","#0064FF",
            "#00A4FF","#00E4FF","#00FF83","#17FF00",
            "#B0FF00","#FFF000","#FFC800","#FFA000",
            "#FF7800","#FF5000","#FF2800","#FF0000"],
    gradientRange = [];

var defs = color_chart.append("defs");

  for (var i = 0; i < colorRange.length; i++) {
     var gradient = defs.append("radialGradient")
        .attr("id", "radial-gradient" + i);

    gradient.append("stop")
        .attr("offset", "0%")
        .attr("stop-color", colorRange[i])
        .attr("stop-opacity", 1);

    gradient.append("stop")
        .attr("offset", "100%")
        .attr("stop-color", colorRange[i])
        .attr("stop-opacity", 0);

这是我遇到问题的地方。 在下一行，我尝试将字符串插入到数组中，以通过 id 获取渐变 def。这在我对字符串 ex 进行硬编码时有效。 gradientRange.push("url(#radial-gradient1)"); 但在我使用 i 时不会。使用i 代替的是输出元素的数据值，而不是for 循环的当前索引。

        gradientRange.push("url(#radial-gradient" + i + ")");
  };


var color = d3.scale.linear()
              .domain(numRange)
              .range(gradientRange);

  color_chart.selectAll("circle")
            .data(temps)
            .enter()
            .append("circle")
            .attr("cx", function(d,i) { return coors[i].x })
            .attr("cy", function(d,i) { return coors[i].y })
            .attr("r", 10)
            .attr("fill", color);

你可以在下图中看到输出。

我需要它们在填充属性中具有正确的 ID，如下所示：

<circle cx="..." cy="..." r="..." fill="url(#radial-gradient1)"></circle>
<circle cx="..." cy="..." r="..." fill="url(#radial-gradient15)"></circle>
<circle cx="..." cy="..." r="..." fill="url(#radial-gradient3)"></circle>
<circle cx="..." cy="..." r="..." fill="url(#radial-gradient12)"></circle>
<circle cx="..." cy="..." r="..." fill="url(#radial-gradient1)"></circle>

Answer 1

似乎temps 数组包含带小数点的数字。如果temps 数组值介于numRange 之间，您可以只对临时值进行四舍五入来解决此问题。

.attr("fill", function(d, i) {
        return color(Math.round(d));
});

var temps = [25.2, 1.45, 240.25, 3.1],
  coors = [{
    x: 10,
    y: 20
  }, {
    x: 50,
    y: 60
  }, {
    x: 50,
    y: 80
  }, {
    x: 90,
    y: 100
  }];

var color_chart = d3.select("body")
  .append("svg")
  .attr("width", 1000)
  .attr("height", 500);

var numRange = [1, 1.5, 2, 2.5, 3, 4, 5, 7, 10, 15, 25, 45, 70, 100, 150, 240],
  colorRange = ["#0500FF", "#0100FF", "#0022FF", "#0064FF",
    "#00A4FF", "#00E4FF", "#00FF83", "#17FF00",
    "#B0FF00", "#FFF000", "#FFC800", "#FFA000",
    "#FF7800", "#FF5000", "#FF2800", "#FF0000"
  ],
  gradientRange = [];

var defs = color_chart.append("defs");

for (var i = 0; i < colorRange.length; i++) {
  var gradient = defs.append("radialGradient")
    .attr("id", "radial-gradient" + i);

  gradient.append("stop")
    .attr("offset", "0%")
    .attr("stop-color", colorRange[i])
    .attr("stop-opacity", 1);

  gradient.append("stop")
    .attr("offset", "100%")
    .attr("stop-color", colorRange[i])
    .attr("stop-opacity", 0);

  gradientRange.push("url(#radial-gradient" + i + ")");
};

console.log(numRange);
console.log(gradientRange);

var color = d3.scale.linear()
  .domain(numRange)
  .range(gradientRange);

color_chart.selectAll("circle")
  .data(temps)
  .enter()
  .append("circle")
  .attr("cx", function(d, i) {
    return coors[i].x
  })
  .attr("cy", function(d, i) {
    return coors[i].y
  })
  .attr("r", 10)
  .attr("fill", function(d, i) {
    return color(Math.round(d));
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>