Question

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

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

Answer 1

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

d3js中的尺度和hebin问题

1 个答案: