d3 hexbin scaling issues

Question

Я пытаюсь узнать, как использовать плагин d3.js hexbin.

Я начал с примера: http://bl.ocks.org/mbostock/4248145, и я его адаптирую.

У меня есть набор точек данных между [0,0] и [600,600]. Я хочу вывести их на график 300 300.

Мой график выглядит неправильно. Похоже, что данные не масштабируются должным образом, и на графике отображается только 1/4 данных. Может кто-нибудь сказать мне, что случилось? Я прочитал книгу об использовании d3, но у меня нет опыта ее использования.

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

Я думаю, я понимаю. У вас есть значения данных в диапазоне от 0 до 600, но хотим, чтобы те сопоставляется с х/у позиций в диапазоне от 0 до 300.

Если это она, то масштаб точки:

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

Обновлены fiddle ,