d3.js - d3jsのスケールとヘビンの問題

Question

通常は 0 付近に分布するデータで hexbin レイアウトを使用しようとしています - すべての例では、画面の中心を中心としたデータを使用しているため、スケールは画面のスケールと同じです (y 反転を除く) 試しました可能性のある負の値を考慮してスケール関数を変更します。y スケールでは機能しますが、x スケールでは NaN が得られ、六角形は画面の左上にプロットされます。それが唯一の問題ではありません-プログラムでhexbin関数のビンサイズを決定したい-私のデータシリーズでは、すべての値が1〜3個の六角形に「ビン化」されており、それらを利用可能な範囲に広げる必要がありますドメイン..これが私のコードです

   <script src="http://d3js.org/d3.v3.min.js"></script>
   <script src="http://d3js.org/d3.hexbin.v0.min.js?5c6e4f0"></script>
   <script>
minMultArray =function(arr,index){
    var min = arr[0][index];
    for (i=0;i<arr.length;i++) {
        min = (min>arr[i][index]?arr[i][index]:min);
    }
    return min;
};
maxMultArray =function(arr,index){
    var max = arr[0][index];
    for (i=0;i<arr.length;i++) {
        max = (max< arr[i][index]?arr[i][index]:max);
    }
    return max;
};

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var randomX = d3.random.normal(0, 5),
    randomY = d3.random.normal(0, 6),
    points = d3.range(2000).map(function() { return [randomX(), randomY()]; });

var minX = minMultArray(points,0);
var minY = minMultArray(points,1);
//var minZ = minMultArray(points,2);
var maxX = maxMultArray(points,0);
var maxY = maxMultArray(points,1);
//var maxZ = maxMultArray(points,2);

var color = d3.scale.linear()
    .domain([0, 20])
    .range(["white", "steelblue"])
    .interpolate(d3.interpolateLab);

var hexbin = d3.hexbin()
    .size([width, height])
    .radius(20);
alert('minX='+minX +' maxX='+maxX);

var x = d3.scale.linear()
    .domain([minX, maxX])
    .range(0,width);
alert('xScale(3)='+x(3));
var y = d3.scale.linear()
    .domain([minY, maxY])
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickSize(6, -height);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickSize(6, -width);

console.log('hex = ' +hexbin(points));

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("class", "mesh")
    .attr("width", width)
    .attr("height", 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); });

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

</script>