Javascript 当我根据容器大小调整SVG的大小时，为什么DOM元素会丢失它们的位置属性？

为了使关节具有响应性，我根据Chris Amico建议的容器大小调整了SVG的尺寸。我的原始地图工作得很好-当你点击posts/population按钮时，地图会有一个简单的淡出，圆圈会以一种合乎逻辑的方式排列起来

下面是我的SVG设置的代码，没有什么特别之处，只是将其作为背景来显示我所做的更改。在身体里，我有：

  <svg width="100%" height="100%">
  </svg>

我看到的新地图大致保持不变，在使用SVG的方式上保留了一个关键区别。首先，我只在主体中包含一个div容器，而不是一个SVG元素，如下所示：

  <div id="mapGeo">
  </div>

加载数据后，我最终将SVG附加到div：

        var svgGeo = d3.select('#mapGeo').append('svg')
            .style('height', hGeo+ 'px')
            .style('width', wGeo +'px')

然而，这样做会破坏散点图。这是我遇到的某种可笑的新手错误，还是这里发生了更严重的事情

总而言之：我对一张工作地图/散点图做了一点小小的改动，本来应该让我保持反应灵敏，但最后却在工作中丢了一把扳手，现在我完全不知所措

---

查看这里的块：

好的，这里有一个解决方案，尽管这并不让我高兴。我在设置天平时遇到了一个问题：

var xScaleGeo = d3.scale
                        .linear()
                        .domain([1, d3.max(data, function(d){ return +d.ratio_rank;})])
                        .rangeRound([0+paddingGeo, wGeo-paddingGeo]);

paddingGeo最初是一个值为45的变量，但在更新的代码中，我将其更改为一个对象：

var paddingGeo = {top: 10, left: 10, bottom: 10, right: 10}

---

试图将对象添加到0是罪魁祸首。叹气。

在浏览器控制台中，我可以看到您的所有位置值都是NaN。如果我对未定义或空的东西进行算术运算，通常会得到N。您提到的位置取决于尺寸、宽度、高度。在计算位置的地方，尝试在调试器中检查代码，并检查是否有一些未定义的值。此外，mapGeo div元素没有设置宽度。您可以在svg元素上设置它

var xScaleGeo = d3.scale
                        .linear()
                        .domain([1, d3.max(data, function(d){ return +d.ratio_rank;})])
                        .rangeRound([0+paddingGeo, wGeo-paddingGeo]);

var paddingGeo = {top: 10, left: 10, bottom: 10, right: 10}