d3.js - Diving into d3js.org, having challenge with setting colors for shapes -


i'm building 3 shapes (with awesome d3js.org library) array, different colors specified, yet shapes end being black (#000000), not sure what's going on, not picking color.

console.log returns #00000. shapes drawn correctly. code here,

var data = [{"x":39.88,"y":15.38,"size":50.13,"color":"#048718","label":["label1"]},{"x":3.83,"y":9.67,"size":75.71,"color":"#ca5d2f","label":["label2"]},{"x":8.62,"y":19.21,"size":37.09,"color":"#bf69ab","label":["label3"]}];    var voronoi = d3.geom.voronoi()         .x(function (d){ return x(d.x); })         .y(function (d){ return y(d.y); })         .clipextent([ [ 0, 0 ], [+width, +height] ]);      var svg = d3.select("body").append("svg")         .attr("width", 1100)         .attr("height", 380);      var g = d3.select("svg").append("g")         .attr("width", 1100)         .attr("height", 380);      var path = g.selectall("path")         .data(voronoi(data), polygon)         .enter().append("path")         .style("stroke","#ffffff")          // >>>>>>>>>>>>> line ----------------------------------          .style("fill", function(d) {              return d3.rgb(d.color);          })         .attr("id", function(d, i) { return "q" + (i) + ""; })         //.attr("transform", function (d){ return "scale(" + (d.size*.01) + ")"; })         //.attr("transform", function (d){ return "translate(" + (x(d.size)) + (y(d.size/3)) + ")"; })         .attr("d", polygon); 

enter image description here

got it! return d3.rgb(d.point.color); trick.


Comments