Javascript 当使用div widths而不是viewBox和preserveAspectRatio属性时，如何使D3热图正确调整大小？

（EDIT：viewBox和preserveAspectRatio很棒，但在IE9中无法正确渲染，因此我无法使用它们。）

我一直在努力调整尺寸。通过选择div的宽度，在其上附加一个SVG，并将我的SVG的宽度设置为div的宽度，我能够使热图响应

尽管如此，当我试图在resize上更新热图时，我遇到了一些问题。以下是调整大小功能：

            d3.select(window).on("resize", resize);

            function resize(){

                marginHM = {top:35, right:0, bottom:50, left:30};
                divWidthHM = parseInt(d3.select("#chartHM").style("width"));
                widthHM = divWidthHM-marginHM.left-marginHM.right;
                gridSize = Math.floor(widthHM/24);
                legendElementWidth = gridSize*2.665;
                heightHM = (9*gridSize)-marginHM.top-marginHM.bottom;


                svgWidthHM = widthHM + marginHM.left+marginHM.right;
                svgHeightHM = heightHM+marginHM.top+marginHM.bottom;

                svgHM.select("svg").style("width", (svgWidthHM+20) + "px")
                     .style("height", (svgHeightHM+30) + "px");



                dayLabels.attr("y", function (d, i){ return i*gridSize;})
                     .attr("transform", "translate(-6," + gridSize/1.5+")");

                timeLabels.attr("x", function(d,i) {return i * gridSize;})
                    .attr("transform", "translate(" + gridSize/2+", -6)");


                cards.attr("x", function(d) {return d.hour *gridSize; })
                    .attr("y", function(d) {return d.day * gridSize; })
                    .attr("width", gridSize)
                    .attr("height", gridSize);



                d3.selectAll("rect.HMLegend")
                    .attr("x", function(d, i){ return legendElementWidth * i;})
                    .attr("y", 7.2*gridSize)
                    .attr("width", legendElementWidth)
                    .attr("height", gridSize/2);

                d3.selectAll("text.HMLegendText")
                    .attr("x", function(d, i){ return legendElementWidth *i;})
                    .attr("y", 8*gridSize);

            }

如果您将窗口拖动到比最初加载的窗口更大的尺寸，您会发现热图会增长，但SVG的尺寸会在初始宽度处被截断；考虑到我在resize函数中更新了宽度，我觉得这真的很奇怪。可以将宽度从其原始值减小，贴图的大小将减小，但不能将其增大到宽度的原始值以上

---

此外，我遇到了图例栏和图例标签的问题。在调整窗口大小时，图例标签不会移动，当您在美国和纽约之间来回单击时，图例颜色通常会移出屏幕或显示副本。我整个晚上都在关注这个问题，现在一切都模糊成了一行毫无意义的代码。我真的很感激有人能帮我解释到底我搞砸了什么

您是否考虑过使用SVG viewbox使d3具有响应性？是的，我一开始尝试过，但正如我所提到的，我希望避免这种情况。尽管表面上支持IE9，但ViewBox与IE9的配合并不好。您是否考虑过使用SVG ViewBox使d3具有响应性？是的，我一开始尝试过，但正如我所提到的，我想避免这种情况。尽管表面上支持IE9，但ViewBox与IE9的配合并不好。