ro如何替换d3.彩虹
ro如何替换d3.彩虹
提问于 2018-08-06 03:27:14
在this example中使用d3.v4.0.0-alpha.35.min.js时，d3.v4.min.js中现在缺少rainbowColor()函数
var color = rainbowColor()
.domain([0, 2 * Math.PI]);是否有人知道此函数是否已被移动或重命名，或者是否存在使用其他配色方案的该示例的工作版本？谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-06 03:44:08
使用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之间有了重大的应用程序接口变化。d3.v4.0.0-alpha.35.min.js可能是版本4的早期alpha版本，仍然使用版本3API来实现特定的功能。
Stack Overflow用户
发布于 2020-09-08 12:53:31
在d3v6中，这已更改为
var color = d3.scaleSequential(d3.interpolateRainbow)
.domain([0, 2 * Math.PI]);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51697569
复制相关文章
相似问题
腾讯云开发者
