當我根據容器大小調整我的SVG大小時，爲什麼我的DOM元素會丟失它們的位置屬性？

爲了使聯合map/scatterplot chart of mine響應，我已經根據容器大小調整了SVG尺寸（正如Chris Amico建議的做法here）。我的原始地圖運作良好 - 當您點擊「帖子/人口」按鈕時，地圖上會有一個簡單的淡入淡出，並且圓圈按照邏輯方式排列。當我根據容器大小調整我的SVG大小時，爲什麼我的DOM元素會丟失它們的位置屬性？

下面是我的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

來源

2015-11-05 scrollex

在瀏覽器控制檯中，我可以看到所有的位置值都是NaN。如果我對未定義或空值的東西進行算術運算，我通常會得到NaN。你提到的位置取決於尺寸（寬度，高度）。嘗試在計算定位的地方查看調試器中的代碼，並檢查是否有一些未定義的值。 – sergeyz

另外mapGeo div元素沒有寬度設置。你在svg元素上設置它 – sergeyz

好吧，這裏的解決方案，儘管在不奉承我了。問題來了我在那裏建立了規模：

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是罪魁禍首。嘆。

來源

2015-11-05 21:14:40 scrollex

當我根據容器大小調整我的SVG大小時，爲什麼我的DOM元素會丟失它們的位置屬性？

回答

相關問題