D3.js

Question

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

现在我有颜色随机，但每个细胞都需要它。

＆＃13;

＆＃13;

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; })
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>