d3.js靜態圖表滾動

我想實現下面的例子d3.js靜態圖表滾動

http://bl.ocks.org/mbostock/4566102

對於大圖，我只想圖形上沒有得到切斷，並允許滾動，用戶一旦外部拖入它當前邊界。

我試着添加overflow：scroll屬性到svg元素，但那似乎不起作用。我是新來的這個javascript/d3.js編程，如果有人能指出錯誤或者只是引導我朝着正確的方向，我會很高興。

來源

2013-08-03 frustatedCoder

這個例子是平移你正在尋找的東西嗎？ http://bl.ocks.org/mbostock/3892919 –

@RichardMarr謝謝。這實際上是我想要做的，但在靜態圖中。我沒有看到示例中定義的拖動行爲。縮放功能是否自動處理？ – frustatedCoder

如何使svg足夠大，但將其封裝到具有溢出的小型div中：auto？

HTML

<div class="outer"> 
    <div class="inner"> 
     <svg></svg> 
    </div> 
</div>

CSS：

.outer { 
    width: 400px; 
    height: 300px; 
    overflow: auto; 
} 
.inner { 
    width: 800px; 
    height: 600px; 
} 
svg { 
    display: block; 
    width: 100%; 
    height: 100%; 
}

Demo

您可以拖動紅色圓圈出的可見區域。

來源

2013-08-04 10:42:13 amakhrov

如果圖形很大，我不想加載/顯示所有數據一次？ – pihentagy

恐怕沒有javascript的干預，這是不可能的。 svg根元素必須具有定義的寬度和高度，並且它不會在任何程度上適應其內容。

如果您打算使用谷歌，您的問題是關於svg的約d3。

我認爲唯一的可能性是使用JavaScript，以便在一個對象落後時增加svg的大小。這樣，雖然我無法弄清楚如何使它在左側工作，但它變得複雜。

我認爲用d3可以提供的解決方案解決問題會更好，如上面提到的縮放行爲。一般來說，如果你是這個領域的新手，我可以建議你考慮之前的交互去實施，從d3畫廊挑選示例，以便更好地瞭解你真正想要的。

來源

2013-08-03 19:24:54 danza

d3.js靜態圖表滾動

回答

相關問題