Saya ingin membuat pemilih warna seperti 'Lebih banyak warna' di Word:

enter image description here

Saya telah membuat daftar semua warna dan lokasinya terstruktur menggunakan artikel ini: http://www .redblobgames.com/grids/hexagons/ (Koordinat aksial)

Namun ketika saya menggunakan daftar ini dengan d3 hexbin, mereka tampaknya dikelompokkan bersama?

Kode lengkap dengan larik item di sini: 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;
                    });
});
0
Cracanut 8 Agustus 2016, 18:44

1 menjawab

Jawaban Terbaik

Anda perlu menambahkan skala d3. Data yang Anda teruskan ke hexbin mencoba menggambar semuanya pada kisi 6x6 piksel yang sama dengan radius 20 piksel. Juga pengembalian fill Anda salah:

<!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>
0
Mark 8 Agustus 2016, 22:46