d3.hexbin数据点未正确显示

Question

以下代码段基本上是此示例https://bl.ocks.org/mbostock/4248145，但带有自定义数据点。无论我如何缩放或修改我的点数组，六边形总是在左上角，虽然看起来分布正确显示。

我该如何解决这个问题？

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    var points = [[1,1]]
        var color = d3.scaleSequential(d3.interpolateLab("white", "#5B85AA"))
        .domain([0, 3]);
        
        var hexbin = d3.hexbin()
        .radius(20)
        .size([0, 3]);
        
        
        var x = d3.scaleLinear()
        .domain([1, 4])
        .range([0, width]);
        
        var y = d3.scaleLinear()
        .domain([1, 4])
        .range([height, 0]);
        
        g.append("clipPath")
        .attr("id", "clip")
        .append("rect")
        .attr("width", width)
        .attr("height", height);
        
        g.append("g")
        .attr("class", "hexagon")
        .attr("clip-path", "url(#clip)")
        .selectAll("path")
        .data(hexbin(points))
        .enter().append("path")
        .attr("d", hexbin.hexagon())
        .attr("transform", function(d) { return "translate(" + 0 + "," + height + ")"; })
        .transition()
        .duration(1000)
        .delay(function (d, i) {
          return i * 10;
        })
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
        .attr("fill", function(d) { return color(d.length); });

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-hexbin.v0.2.min.js"></script>
<svg width="960" height="500"></svg>

Answer 1

这是预期的结果，因为您的数据只是：

[1, 1]

哪个是原点旁边的单个数据点。例如，使用相同的代码，但创建1000个随机数据点，从0到width ...

var points = d3.range(1000).map(d=>([Math.random()*width, Math.random()*width]));

...会有不同的结果：

＆＃13;

＆＃13;

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    var points = d3.range(1000).map(d=>([Math.random()*width, Math.random()*width]));
        var color = d3.scaleSequential(d3.interpolateLab("white", "#5B85AA"))
        .domain([0, 3]);
        
        var hexbin = d3.hexbin()
        .radius(20)
        .size([0, 3]);
        
        
        var x = d3.scaleLinear()
        .domain([1, 4])
        .range([0, width]);
        
        var y = d3.scaleLinear()
        .domain([1, 4])
        .range([height, 0]);
        
        g.append("clipPath")
        .attr("id", "clip")
        .append("rect")
        .attr("width", width)
        .attr("height", height);
        
        g.append("g")
        .attr("class", "hexagon")
        .attr("clip-path", "url(#clip)")
        .selectAll("path")
        .data(hexbin(points))
        .enter().append("path")
        .attr("d", hexbin.hexagon())
        .attr("transform", function(d) { return "translate(" + 0 + "," + height + ")"; })
        .transition()
        .duration(1000)
        .delay(function (d, i) {
          return i * 10;
        })
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
        .attr("fill", function(d) { return color(d.length); });

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-hexbin.v0.2.min.js"></script>
<svg width="960" height="500"></svg>

＆＃13;

＆＃13;

＆＃13;

除此之外，你说了什么：

  

无论我如何缩放或修改我的点数组，六边形总是在左上角。

不准确。例如，这是相同的代码，但使用[[100,100]]。您可以在右下方和右侧看到六边形：

＆＃13;

＆＃13;

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    var points = [[100,100]];
        var color = d3.scaleSequential(d3.interpolateLab("white", "#5B85AA"))
        .domain([0, 3]);
        
        var hexbin = d3.hexbin()
        .radius(20)
        .size([0, 3]);
        
        
        var x = d3.scaleLinear()
        .domain([1, 4])
        .range([0, width]);
        
        var y = d3.scaleLinear()
        .domain([1, 4])
        .range([height, 0]);
        
        g.append("clipPath")
        .attr("id", "clip")
        .append("rect")
        .attr("width", width)
        .attr("height", height);
        
        g.append("g")
        .attr("class", "hexagon")
        .attr("clip-path", "url(#clip)")
        .selectAll("path")
        .data(hexbin(points))
        .enter().append("path")
        .attr("d", hexbin.hexagon())
        .attr("transform", function(d) { return "translate(" + 0 + "," + height + ")"; })
        .transition()
        .duration(1000)
        .delay(function (d, i) {
          return i * 10;
        })
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
        .attr("fill", function(d) { return color(d.length); });

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-hexbin.v0.2.min.js"></script>
<svg width="960" height="500"></svg>

＆＃13;

＆＃13;

＆＃13;