Question

我想在Word中制作一个类似“更多颜色”的颜色选择器：

我已经使用这篇文章列出了所有颜色及其位置：http://www.redblobgames.com/grids/hexagons/（轴向坐标）

然而，当我将这个列表与d3 hexbin一起使用时，它们似乎被组合在一起了？

此处包含项目数组的完整代码：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;
                    });
});

Answer 1

您需要添加d3 scale。您传递给hexbin的数据正在尝试在半径为20像素的相同6x6像素网格上绘制所有内容。您的fill返回也是错误的：

＆＃13;

<!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 to 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>

＆＃13;

D3.js hexbin六角形颜色选择器

1 个答案: