Question

为了使联合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的方式存在重大差异。首先，我只在主体中包含一个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

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

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

1 个答案: