d3 hexbin缩放问题

d3 hexbin scaling issues

本文关键字：问题 缩放 hexbin d3      更新时间：2023-09-26

我正在学习如何使用d3.js的hexbin插件。

我从这个例子开始：http://bl.ocks.org/mbostock/4248145，我正在调整它。

我有一个介于[0,0]和[6600]之间的点的数据集。我想把它们输出到一个300300的图形中。

我的图表看起来不对。看起来数据没有正确缩放，图表只显示了1/4的数据。有人能告诉我怎么了吗？我读过一本关于使用d3的书，但我没有太多的使用经验

我的己糖

var graph_width = 300;
var graph_height = 300;
var data_width = 600;
var data_height = 600;
var randomX = d3.random.normal(data_width / 2, 80),
    randomY = d3.random.normal(data_height / 2, 80),
    points = d3.range(2000).map(function() { return [randomX(), randomY()]; });
var color = d3.scale.linear()
    .domain([0, 20])
    .range(["white", "steelblue"])
    .interpolate(d3.interpolateLab);
var hexbin = d3.hexbin()
    .size([graph_width, graph_height])
    .radius(20);
var x = d3.scale.linear()
    .domain([0, data_width])
    .range([0, graph_width]);
var y = d3.scale.linear()
    .domain([0, data_height])
    .range([0, graph_height]);
var svg = d3.select("body").append("svg")
    .attr("width", graph_width)
    .attr("height", graph_height)
  .append("g");
svg.append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("class", "mesh")
    .attr("width", graph_width)
    .attr("height", graph_height);
svg.append("g")
    .attr("clip-path", "url(#clip)")
  .selectAll(".hexagon")
    .data(hexbin(points))
  .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 color(d.length); });

我想我明白了。您的数据值在0到600的范围内，但希望映射到0到300的x/y位置。

如果是这样的话，那么就缩放点数：

var x = d3.scale.linear()
    .domain([0, data_width])
    .range([0, graph_width]);
var y = d3.scale.linear()
    .domain([0, data_height])
    .range([0, graph_height]);
var randomX = d3.random.normal(data_width / 2, 80),
    randomY = d3.random.normal(data_height / 2, 80),
    points = d3.range(2000).map(function() { return [x(randomX()), y(randomY())]; });

更新的小提琴。

相关文章：