如何在viewBox中對齊和調整圖表大小

我正在嘗試使樹形圖響應，但是，圖表只是簡單地向左和向下漂移。就好像有影響x0和y0的東西。圖表沒有響應調整大小，但我認爲這可能與寬度和高度有關...可能影響圖表的位置。或者，這只是一個CSS問題？與這個很混淆。我想我失去了一些東西明顯...如何在viewBox中對齊和調整圖表大小

Plnkr：https://plnkr.co/edit/U7Zsbjy0zubnMwo1SHg8?p=preview

var svg = d3.select("#graph") 
.append("svg") 
    .attr('width', width + margin.left + margin.right) 
    .attr('height', height + margin.top + margin.bottom) 
    .attr('style', 'border:solid 2px blue') 
    .attr('style', 'padding0px') 
.call(responsivefy)

來源

2016-11-10 Kevin Waterson

在管線156你在做

var newNode = node.enter() 
      .append("g") 
      .attr("class", "node"); 
      .attr("transform", "translate("+[fullWidth/2, fullHeight/2]+")")

代碼塊的最後一行是爲什麼一切都結束了底部對，你正在翻譯每個組從圖表中間開始（而不是左上角）。如果你刪除它，圖表看起來沒問題。以下是您編輯過的圖表：https://plnkr.co/edit/RUhlH4rwopNKf4iDiUge?p=preview

至於使其響應，您已經在SVG上設置了viewbox屬性以使其響應。您不需要額外的功能responsivefy就可以了。你看起來像你使用這個答案的響應類：https://stackoverflow.com/a/25978286/11487但你的標記中的節點的順序不是那裏。

一兩件事，重要的是要注意：當您使用preserveAspectRatio與"xMinYMin meet"得到響應曲線，則不能使用width和height說明。

隨着該固定起來：

https://plnkr.co/edit/KADSH9GSX1E3lnpmhzjV?p=preview

來源

2016-11-10 04:22:44

「有一點要注意這一點很重要：當您使用preserveAspectRatio與‘xMinYMin大會’得到響應曲線，則不能使用寬度和高度的指令」 - 注意 –

如何在viewBox中對齊和調整圖表大小

回答

相關問題