Question

在this example中使用d3.v4.0.0-alpha.35.min.js后，rainbowColor()中缺少了一个d3.v4.min.js函数：

var color = rainbowColor()
  .domain([0, 2 * Math.PI]);

有人知道此功能是否已被移动或重命名，或者是否存在使用其他配色方案的该示例的有效版本？谢谢。

Answer 1

通过d3v4和d3v5，您可以使用：

var color = d3.scaleSequential()
  .domain([0, 2 * Math.PI])
  .interpolator(d3.interpolateRainbow);

代替：

var color = d3.scaleRainbow()
  .domain([0, 2 * Math.PI]);

将您的示例翻译为：

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    size = Math.max(width, height);

var color = d3.scaleSequential()
  .domain([0, 2 * Math.PI])
  .interpolator(d3.interpolateRainbow);

var circles = d3.packSiblings(d3.range(2000)
  .map(d3.randomUniform(8, 26))
  .map(function(r) { return {r: r}; }))
  .filter(function(d) { return -500 < d.x && d.x < 500 && -500 < d.y && d.y < 500; });

svg
  .select("g")
  .selectAll("circle")
  .data(circles)
  .enter().append("circle")
  .style("fill", function(d) { return color(d.angle = Math.atan2(d.y, d.x)); })
  .attr("cx", function(d) { return Math.cos(d.angle) * (size / Math.SQRT2 + 30); })
  .attr("cy", function(d) { return Math.sin(d.angle) * (size / Math.SQRT2 + 30); })
  .attr("r", function(d) { return d.r - 0.25; })
  .transition()
  .ease(d3.easeCubicOut)
  .delay(function(d) { return Math.sqrt(d.x * d.x + d.y * d.y) * 10; })
  .duration(1000)
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; });

body {
  background: #333;
}

circle {
  stroke: #000;
  stroke-width: 1.5px;
}

<svg width="960" height="960"><g transform="translate(480,480)"></g></svg>
<script src="http://d3js.org/d3.v4.min.js"></script>

其中scaleSequential是d3-scale子模块的一部分，而interpolateRainbow是d3-scale-chromatic子模块的一部分。

d3版本3和4之间在api上进行了重大更改。d3.v4.0.0-alpha.35.min.js可能是版本4的早期alpha版本，仍在该特定功能中使用版本3 api。

Answer 2

在d3v6中，它已更改为

var color = d3.scaleSequential(d3.interpolateRainbow)
  .domain([0, 2 * Math.PI]);

ro如何替换d3.rainbow

2 个答案: