Javascript 带d3.js的十六进制网格

我目前正在尝试使用和for创建一个十六进制网格。我遇到的问题是，我的网格中总是有空的六边形或整个空行，而不是所有的六边形放在一起

有没有办法解决这个问题

:

var保证金={
排名：80，
右:20,，
底数：50，
左：80
},
宽度=$（窗口）.width（）-margin.left-margin.right，
高度=$（窗口）.height（）-28-margin.top-margin.bottom；
var点=[]；
对于（变量i=0；i<8；i++）{
对于（var j=0；j<12；j++）{
点推（[数学地板（宽度*j/12），数学地板（高度*i/8）]；
}
}
var hexbin=d3.hexbin（）
.尺寸（[宽度、高度]）
.半径（（宽度/12）/2）；
var svg=d3.select（$（“#grid”）.get（0））.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
svg.append（“g”）
.selectAll（“.hexagon”）
.数据（hexbin（点））
.enter（）.append（“路径”）
.attr（“类”、“六边形”）
.attr（“d”，函数（d）{
返回hexbin.hexagon（）；
})
.attr（“转换”，函数（d）{
返回“translate”（“+d.x+”，“+d.y+”）；
})
.attr（“笔划”、“fff”）
.attr（“笔划宽度”，“2px”）
.样式（“填充”，功能（d）{
返回“#dcdc”//颜色（d.length）；
});

更改点数据，以便在添加六边形时，平移不会将六边形向右推得太远或向下推得太远：

大概是这样的：

var points = [];
for (var i = 0; i < 8; i++) {
    for (var j = 0; j < 12; j++) {
        points.push([Math.floor(width * j / 14), Math.floor(height * i / 11)]);
    }
}

var points=[]；
对于（变量i=0；i<8；i++）{
对于（var j=0；j<12；j++）{
点推（[数学地板（宽度*j/14），数学地板（高度*i/11）]；
}
}

这是可行的，但如果更改屏幕分辨率，网格应始终显示相同数量的Hexogon。使用这种解决方案，情况并非如此。是的，当你改变屏幕分辨率时，插件似乎有点脆弱——你可以这样修改它：谢谢，这就是我想要的：你是如何得到偏移的1.8和1.5数字的？@Jesunsonoland-一些基于六边形比例的尝试和错误。

var points = [];
for (var i = 0; i < 8; i++) {
    for (var j = 0; j < 12; j++) {
        points.push([Math.floor(width * j / 14), Math.floor(height * i / 11)]);
    }
}