javascript - 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]));

...将会有不同的结果:

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); });

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

除此之外，你说的是:

No matter how I scale or modify my points array, the hexagons are always at the upper left corner.

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

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); });

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