D3組翻譯溢出問題

我無法確定此問題的確切原因。我正在爲圖表創建一個動態圖例，我想將它放在「容器div」的確切中心。在創建完整的圖例之後，我將該組翻譯爲一個使其位於div中心的位置。D3組翻譯溢出問題

但是，我看到的是SVG在300px處得到「裁剪」。從某種意義上講，它會溢出一些邊界，而SVG圖形的那部分是不可見的。

我在這裏提供了示例代碼fiddle。

對於在上面的鏈接中編寫的代碼混亂，我很抱歉。

這是我用來翻譯svg的。

d3.select(".avs-legend-group").attr("transform", "translate("+ xOffset + ",0)");

-where「.avs-legend-group」是一個包含「g」組元素的類。

來源

2014-03-31 Serendipity

檢查這個爲自己會是什麼樣[這個Firefox browsershot（http://browsershots.org/screenshots/9e92f997c91e00e6e2fd2a5e27cd1905）？在[chrome]中爲我工作（http://browsershots.org/screenshots/fd032191ea696a407117936f6093a07f） –

這個問題似乎是一個瀏覽器問題（Firefox），其中沒有明確指定SVG的寬度。

什麼SVG規範說，在這種情況下應該發生是

寬度= 「<長度>」

對於最外面的SVG元素，SVG文檔片段的固有寬度。對於嵌入的'svg'元素，放置'svg'元素的矩形區域的寬度。

負值是錯誤（請參閱錯誤處理）。值爲零將禁用該元素的渲染。

如果未指定該屬性，則效果就好像指定了「100％」的值。

動畫：是的。

SVG 1.1 (Second Edition) – 16 August 2011（重點煤礦）

如果您提供的100％的隱含價值可以明確地包含SVG這個問題在Firefox中解決似乎。

var svg = d3.select("#" + uniqueIdentifier) 
    .append("svg") 
      .attr('width', '100%');

您可以用ammended

來源

2014-03-31 08:33:28

我從來沒有在Chrome中檢查過。我的錯。我是SVG新手，沒有閱讀過這個寬度的特定作品。這是一個很好的答案。感謝您對spec的指導！ – Serendipity

D3組翻譯溢出問題

回答

相關問題