javascript - D3.js 中 voronoi 多边形的生成颜色

Question

我正在尝试创建一个随机多边形颜色，范围在为每个 voronoi 单元生成的 0-999 的十六进制字段中。

现在我已将颜色随机化，但每个单元格都需要它。

var voronoi = d3.voronoi()
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height")	
var sites = d3.range(300)
	.map(function(d){return[Math.random()*(width/2)+100,
							Math.random()*(height/2)+100,
							"#"+Math.round(Math.random()*999)]})	
var voronoi = d3.voronoi()
var polygon = svg.append("g")
    .attr("class", "polygons")
	.style("stroke", "tan")
	.style("stroke-width", 0.2)
	.selectAll("path")
	.data(voronoi.polygons(sites))
	.enter().append("path")
    .call(redrawPolygon)
	.style("fill", "beige")	
function redrawPolygon(polygon) {
	polygon.attr("d",function(d) { return d ? "M" + d.join("L") + "Z" : null; })
}

<svg width="1000" height="1000">
		</svg>
			<h1>d3</h1>
				<script src="https://d3js.org/d3.v4.min.js"></script>
				<script src="1104.js"></script>

Answer 1

所以这里的原因是，如果您以 .polygons 类为目标，它就是 d3 路径的容器。所以你需要做的是创建一个函数来返回一个随机的十六进制代码(有一个 d3，但为了演示，我使用了 this stack answer 中的一个)。

迭代每个路径元素，并将polygon.style.fill设置为随机颜色返回。砰!每条路径的随机颜色。

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

var voronoi = d3.voronoi()
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height")	
var sites = d3.range(300)
	.map(function(d){return[Math.random()*(width/2)+100,
							Math.random()*(height/2)+100,
							"#"+Math.round(Math.random()*999)]})	
var voronoi = d3.voronoi();
var polygon = svg.append("g")
    .attr("class", "polygons")
	.style("stroke", "tan")
	.style("stroke-width", 0.2)
	.selectAll("path")
	.data(voronoi.polygons(sites))
	.enter().append("path")
    .call(redrawPolygon)

document.querySelectorAll("path").forEach(polygon => polygon.style.fill = getRandomColor());

function redrawPolygon(polygon) {
	polygon.attr("d",function(d) { return d ? "M" + d.join("L") + "Z" : null; })
}

<svg width="1000" height="1000">
		</svg>
			<h1>d3</h1>
				<script src="https://d3js.org/d3.v4.min.js"></script>
				<script src="1104.js"></script>