Generated color of voronoi polygon in D3.js

Question

I am trying to create a random polygon color ranging in the hex field from 0-999 generated for each voronoi cell.

Right now I have have color randomised but it is required for each cell.

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>

Possible duplicate of [random colors for circles in d3.js graph](http://stackoverflow.com/questions/13563471/random-colors-for-circles-in-d3-js-graph) — hughes, Apr 14 '17 at 21:30
I already have the colours indexed, I am trying to access them, the array generated in d3 for each cell has a point and colour (x , y , #0-999) — Chris, Apr 14 '17 at 21:35
@hughes not quite a duplicate, because with d3 voronoi's, the `style:fill` relates to the polygon svg, not the individual path elements. — Sterling Archer, Apr 14 '17 at 21:40
I did search the internet for 2 days before shamefully having to ask this question. — Chris, Apr 14 '17 at 21:51

score 2 · Accepted Answer · edited May 23 '17 at 12:25

So the reason here is that if you target the .polygons class, it's the container for the d3 paths. So what you need to do is make a function to return a random hex code (there's a d3, but for the sake of the demo, I used one from this stack answer).

Iterate every path element, and set the polygon.style.fill to the random color return. Bam! Random colors per path.

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>

Generated color of voronoi polygon in D3.js

1 Answers1