d3 hexbin缩放问题

Question

I'm trying to learn how to use the d3.js hexbin plugin.

I started with the example: http://bl.ocks.org/mbostock/4248145 , and I'm adapting it.

I have a data set of points between [0,0] and [600,600]. I want to output them to a 300,300 graph.

My graph doesn't look right. It looks like the data isn't being scaled properly and the graph is only showing 1/4 of the data. Can someone tell me what's wrong? I've read a book about using d3, but I don't have very much experience using it.

Jsfiddle of my hexbin

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

Answer 1

I think I understand. You have data values in in the range of 0 to 600 but want those mapped to x/y positions in the range of 0 to 300.

If that's it then scale the points:

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

Updated fiddle .