Javascript d3热图中的宽度

这是我的示例代码。我的目的是生成一个具有矩形的热图，如

var margin={top:50，right:0，bottom:100，left:30}， 宽度=960-margin.left-margin.right， 高度=430-margin.top-margin.bottom， gridSize=Math.floorwidth/22， LegendlementWidth=gridSize*2， 桶=9， colors=[ffffd9，edf8b1，c7e9b4,7fcdbb，41b6c4,1D91C0225EA8253494081D58]，//或者COLORBRER.YlGnBu[9] 天=[Mo，Tu，We，Th，Fr，Sa，Su]， 时间=[1a、2a、3a、4a、5a、6a、7a、8a、9a、10a、11a、12a、1p、2p、3p、4p、5p、6p、7p、8p、9p、10p、11p、12p]； 数据集=[data.tsv，data2.tsv]； var svg=d3.selectchart.appendsvg .attrwidth，width+margin.left+margin.right .attrhight，height+margin.top+margin.bottom .附录 .attransform，translate+margin.left+，+margin.top+； var dayLabels=svg.selectAll.dayLabel .数据日 .enter.appendtext .text函数d{返回d；} .attrx，0 .attry，函数d，i{返回i*gridSize；} .styletext锚定，结束 .attrtransform，translate-6，+gridSize/1.5+

---

.attr类，函数d，i{return i>=0&&i=7&&i如果您的路径正确，网格宽度已增加。如果您右键单击任何平铺并检查元素，则可以检查这一点。但是发生的情况是，网格仍在相同距离重叠，因此显示为正方形。您还需要将10px添加到x，以便它们不会重叠重叠

cards.enter().append("rect")
              .attr("x", function(d) { return (d.hour - 1) * (gridSize+10); }) //10px added to the gridSize for the x displacement
              .attr("y", function(d) { return (d.day - 1) * gridSize; })
              .attr("rx", 4)
              .attr("ry", 4)
              .attr("class", "hour bordered")
              .attr("width", gridSize+10)
              .attr("height", gridSize)
              .style("fill", colors[0]);

希望这有帮助

---

不过，在上面的代码中，需要注意的是，原始的gridSize是基于可变宽度计算的。由于矩形比gridSize大，您的矩形很可能会从svg容器中取出并被剪切。要解决此问题，您必须交换角色，即设置gridSize，然后计算基于gridSize+10的e宽度。如果您需要帮助，请告诉我。

非常感谢，我解决了我的问题。但是您知道如何使其可滚动吗？如果我垂直滚动，单元格应与y轴标签一起移动，同样，在水平滚动期间，单元格应与xaxis标签一起移动。您好，virupaksha。很高兴我能提供帮助。您正在寻找的效果称为画笔或平移。尝试搜索并实现它。如果您对此有问题，建议您提出另一个问题，因为这与此问题的标题非常不同。@Coola我是通过谷歌找到此答案的，但它似乎不起作用。这是代码笔：箱子还在重叠。你能看一下吗？thanks@alt255在代码中，括号中没有gridSize+10。这需要放在括号中，以便将整个值乘以小时值。因此，该行应为：.attrx，function d{return d.hour-1*gridSize+10；}。还请注意，您的图形超出了svg的限制。因此，您可能希望在开始时调整gridSize计算。这是带有正确轴标签的更正代码笔，谢谢@Coola。我无法理解您为什么要按40而不是22 gridSize=Math.floorwidth/40跳水？？