i make colorpicker 'more colors' in word:
i've made list of colors , location structured using article: http://www.redblobgames.com/grids/hexagons/ (axial coordinates)
however when use list d3 hexbin, seem grouped together?
full code item array here: jsfiddle
var colors = [...]; var hexbin = d3.hexbin().radius(20).x(function (d) { return d.x; }).y(function (d) { return d.y; }); var svg = d3.select('svg').attr("width", 300).attr("height", 300); svg.append("g") .selectall(".hexagon") .data(hexbin(hexcolors)) .enter().append("path") .attr("class", "hexagon") .attr("d", hexbin.hexagon()) .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; }) .style("fill", function (d) { return d.c; }); });
you need add in d3 scale. data passing hexbin attempting draw on same 6x6 pixel grid radius of 20 pixels. fill return wrong:
<!doctype html> <html> <head> <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script> <script src="https://rawgit.com/d3/d3-plugins/master/hexbin/hexbin.js"></script> </head> <body> <svg></svg> <script> var hexcolors = [{x:0,y:-6,c:"#003366"},{x:1,y:-6,c:"#336699"},{x:2,y:-6,c:"#3366cc"},{x:3,y:-6,c:"#3366cc"},{x:4,y:-6,c:"#000099"},{x:5,y:-6,c:"#000099"},{x:6,y:-6,c:"#000066"},{x:-1,y:-5,c:"#006666"},{x:0,y:-5,c:"#006699"},{x:1,y:-5,c:"#0099cc"},{x:2,y:-5,c:"#0066cc"},{x:3,y:-5,c:"#0033cc"},{x:4,y:-5,c:"#0000ff"},{x:5,y:-5,c:"#3333ff"},{x:6,y:-5,c:"#333399"},{x:-2,y:-4,c:"#008080"},{x:-1,y:-4,c:"#009999"},{x:0,y:-4,c:"#33cccc"},{x:1,y:-4,c:"#00ccff"},{x:2,y:-4,c:"#0099ff"},{x:3,y:-4,c:"#0066ff"},{x:4,y:-4,c:"#3366ff"},{x:5,y:-4,c:"#3333cc"},{x:6,y:-4,c:"#666699"},{x:-3,y:-3,c:"#339966"},{x:-2,y:-3,c:"#00cc99"},{x:-1,y:-3,c:"#00ffcc"},{x:0,y:-3,c:"#00ffff"},{x:1,y:-3,c:"#33ccff"},{x:2,y:-3,c:"#3399ff"},{x:3,y:-3,c:"#6699ff"},{x:4,y:-3,c:"#6666ff"},{x:5,y:-3,c:"#6600ff"},{x:6,y:-3,c:"#6600cc"},{x:-4,y:-2,c:"#339933"},{x:-3,y:-2,c:"#00cc66"},{x:-2,y:-2,c:"#00ff99"},{x:-1,y:-2,c:"#66ffcc"},{x:0,y:-2,c:"#66ffff"},{x:1,y:-2,c:"#66ccff"},{x:2,y:-2,c:"#99ccff"},{x:3,y:-2,c:"#9999ff"},{x:4,y:-2,c:"#9966ff"},{x:5,y:-2,c:"#9933ff"},{x:6,y:-2,c:"#9900ff"},{x:-5,y:-1,c:"#006600"},{x:-4,y:-1,c:"#00cc00"},{x:-3,y:-1,c:"#00ff00"},{x:-2,y:-1,c:"#66ff99"},{x:-1,y:-1,c:"#99ffcc"},{x:0,y:-1,c:"#ccffcc"},{x:1,y:-1,c:"#ccecff"},{x:2,y:-1,c:"#ccccff"},{x:3,y:-1,c:"#cc99ff"},{x:4,y:-1,c:"#cc66ff"},{x:5,y:-1,c:"#cc00ff"},{x:6,y:-1,c:"#9900cc"},{x:-6,y:0,c:"#9900cc"},{x:-5,y:0,c:"#008000"},{x:-4,y:0,c:"#33cc33"},{x:-3,y:0,c:"#66ff66"},{x:-2,y:0,c:"#99ff99"},{x:-1,y:0,c:"#ccffcc"},{x:0,y:0,c:"#ffffff"},{x:1,y:0,c:"#ffccff"},{x:2,y:0,c:"#ff99ff"},{x:3,y:0,c:"#ff66ff"},{x:4,y:0,c:"#ff00ff"},{x:5,y:0,c:"#cc00cc"},{x:6,y:0,c:"#660066"},{x:-5,y:1,c:"#336600"},{x:-4,y:1,c:"#009900"},{x:-3,y:1,c:"#66ff33"},{x:-2,y:1,c:"#99ff66"},{x:-1,y:1,c:"#ccff99"},{x:0,y:1,c:"#ffffcc"},{x:1,y:1,c:"#ffcccc"},{x:2,y:1,c:"#ff99cc"},{x:3,y:1,c:"#ff66cc"},{x:4,y:1,c:"#ff33cc"},{x:5,y:1,c:"#cc0099"},{x:6,y:1,c:"#800080"},{x:-4,y:2,c:"#333300"},{x:-3,y:2,c:"#669900"},{x:-2,y:2,c:"#99ff33"},{x:-1,y:2,c:"#ccff66"},{x:0,y:2,c:"#ffff99"},{x:1,y:2,c:"#ffcc99"},{x:2,y:2,c:"#ff9999"},{x:3,y:2,c:"#ff6699"},{x:4,y:2,c:"#ff3399"},{x:5,y:2,c:"#cc3399"},{x:6,y:2,c:"#990099"},{x:-3,y:3,c:"#666633"},{x:-2,y:3,c:"#99cc00"},{x:-1,y:3,c:"#ccff33"},{x:0,y:3,c:"#ffff66"},{x:1,y:3,c:"#ffcc66"},{x:2,y:3,c:"#ff9966"},{x:3,y:3,c:"#ff7c80"},{x:4,y:3,c:"#ff0066"},{x:5,y:3,c:"#d60093"},{x:6,y:3,c:"#993366"},{x:-2,y:4,c:"#808000"},{x:-1,y:4,c:"#cccc00"},{x:0,y:4,c:"#ffff00"},{x:1,y:4,c:"#ffcc00"},{x:2,y:4,c:"#ff9933"},{x:3,y:4,c:"#ff6600"},{x:4,y:4,c:"#ff5050"},{x:5,y:4,c:"#cc0066"},{x:6,y:4,c:"#660033"},{x:-1,y:5,c:"#996633"},{x:0,y:5,c:"#cc9900"},{x:1,y:5,c:"#ff9900"},{x:2,y:5,c:"#cc6600"},{x:3,y:5,c:"#ff3300"},{x:4,y:5,c:"#ff0000"},{x:5,y:5,c:"#cc0000"},{x:6,y:5,c:"#990033"},{x:0,y:6,c:"#663300"},{x:1,y:6,c:"#996600"},{x:2,y:6,c:"#cc3300"},{x:3,y:6,c:"#993300"},{x:4,y:6,c:"#990000"},{x:5,y:6,c:"#800000"},{x:6,y:6,c:"#a50021"} ]; // create scale mapped data var s = d3.scalelinear().range([0,180]).domain([-6,6]); // use scale in hexbin var hexbin = d3.hexbin().radius(10).x(function(d) { return s(d.x); }).y(function(d) { return s(d.y); }); var svg = d3.select('svg').attr("width", 180).attr("height", 180); svg.append("g") .selectall(".hexagon") .data(hexbin(hexcolors)) .enter().append("path") .attr("class", "hexagon") .attr("d", hexbin.hexagon()) .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) .style("fill", function(d) { return d[0].c; }); </script> </body> </html>
Comments
Post a Comment