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

【问题标题】：Why do my DOM elements lose their location attributes when I size my SVG based on container size?当我根据容器大小调整 SVG 大小时，为什么我的 DOM 元素会丢失它们的位置属性？
【发布时间】：2015-11-05 19:11:27
【问题描述】：

为了使联合 map/scatterplot chart of mine 响应，我已经根据容器大小调整了 SVG 尺寸（正如 Chris Amico 建议做的 here）。我的原始地图运行良好——当您点击“帖子/人口”按钮时，地图会简单地淡出，圆圈以合乎逻辑的方式排列。

这是我的 SVG 设置的代码（没什么花哨的，只是将其作为背景显示我所做的更改）。在身体里，我有：

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

在脚本的相关部分，我有：

var padding = 45,
    h = 500,
    w = 700,
    svg = d3.select("body").select("svg"),
    projection = d3.geo.albersUsa().translate([w/2,h/2]).scale([900]),
    path = d3.geo.path().projection(projection);

我thrown up onto a block 的新地图或多或少保持不变，这在我使用 SVG 的方式上有所不同。首先，我只在 body 中包含一个 div 容器，而不是一个 SVG 元素，如下所示：

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

其次，我在 SVG 的设置中更改了一些内容以考虑容器宽度：

    var paddingGeo = {top: 10, left: 10, bottom: 10, right: 10},
        wGeo = parseInt(d3.select('#mapGeo').style('width')),
        wGeo = wGeo - paddingGeo.left - paddingGeo.right,
        mapRatio = .5,
        hGeo = wGeo * mapRatio,
        projection = d3.geo.albersUsa().scale(wGeo).translate([wGeo/2, hGeo/2]);
        path = d3.geo.path().projection(projection);

加载数据后，我终于将我的 SVG 附加到 div 中：

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

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

总结一下：我对工作地图/散点图做了一些细微的改动，这本应该让我保持响应，但最终在工作中扔了一个扳手，现在完全困惑了。

在这里查看区块：http://bl.ocks.org/iblind/6c75592f5053a86c5480

【问题讨论】：

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

标签： javascript d3.js svg

【解决方案1】：

好的，这就是解决方案，尽管我对此并不满意。问题出在我设置秤的地方：

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 是罪魁祸首。叹息。

【讨论】：