Question

我一直在关注使用正态分布的随机点的六边形分箱但是试图将其定制为指数分布的块。

代码运行，但输出似乎沿x轴显示镜像。也就是说，这些点都沿着左上方而不是左下方聚集。我一直在玩转换功能，但不能完全理解它。我错过了什么？ JSFiddle

<!DOCTYPE html>
<style>

.hexagon {
  stroke: #000;
  stroke-width: 0.5px;
}

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

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 randomX = d3.randomExponential(1 / 30),
    randomY = d3.randomExponential(1 / 30),
    points = d3.range(2000).map(function() { return [randomX(), randomY()]; });

var color = d3.scaleSequential(d3.interpolateLab("white", "steelblue"))
    .domain([0, 20]);

var hexbin = d3.hexbin()
    .radius(5)
    .extent([[0, 0], [width, height]]);

var x = d3.scaleLinear()
    .domain([0, width])
    .range([0, width]);

var y = d3.scaleLinear()
    .domain([0, height])
    .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(" + d.x + "," + d.y + ")"; }) 
    .attr("fill", function(d) { return color(d.length); });

</script>

Answer 1

您设置了比例，但从不使用它们：

.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
})

解决方案：使用您的尺度：

.attr("transform", function(d) {
    return "translate(" + x(d.x) + "," + y(d.y) + ")";
    //scales here --------^--------------^
})

以下是您更改的代码：

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 randomX = d3.randomExponential(1 / 30),
  randomY = d3.randomExponential(1 / 30),
  points = d3.range(2000).map(function() {
    return [randomX(), randomY()];
  });

var color = d3.scaleSequential(d3.interpolateLab("white", "steelblue"))
  .domain([0, 20]);

var hexbin = d3.hexbin()
  .radius(5)
  .extent([
    [0, 0],
    [width, height]
  ]);

var x = d3.scaleLinear()
  .domain([0, width])
  .range([0, width]);

var y = d3.scaleLinear()
  .domain([0, height])
  .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(" + x(d.x) + "," + y(d.y) + ")";
  })
  .attr("fill", function(d) {
    return color(d.length);
  });

.hexagon {
  stroke: #000;
  stroke-width: 0.5px;
}

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

带指数随机数的六边形分箱

1 个答案: