1

我正在尝试将 hexbin 布局与通常分布在 0 附近的数据一起使用 - 所有示例都使用以屏幕中心为中心的数据，因此比例与屏幕比例相同（除了 y 反转）我试过了修改比例函数以考虑可能的负值。它适用于 y 尺度，但 x 尺度给出 NaN，并且六边形绘制在屏幕左上方。这不是唯一的问题——我想以编程方式确定 hexbin 函数的 bin 大小——在我的数据系列中，所有值都被“binned”成一到三个六边形，我需要将它们分布在可用的域..这是我的代码

   <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>
4

1 回答 1

1

在对 hexbin 函数进行更多调试后，它们与负域和/或小数域不兼容 - 所以我通过将原始数据按线性比例映射到六边形图的高度和宽度来解决这个问题。然后 bin 大小由半径控制。我还修改了 hexbin 分箱函数来处理三个元素数组，并且可以计算第三个元素的统计数据，使用颜色或大小来显示均值/中值/stddev/max/min。如果有兴趣，我可以在github上发布代码...

于 2013-07-12T01:02:51.213 回答