次の例を実装しようとしています
http://bl.ocks.org/mbostock/4566102
大きなグラフの場合、ユーザーが現在の境界の外にドラッグすると、グラフが切り取られずにスクロールできるようにするだけです。
overflow:scroll プロパティを svg 要素に追加しようとしましたが、うまくいかないようです。私はこの javascript/d3.js プログラミングに慣れていないので、誰かがエラーを指摘したり、正しい方向に導いてくれるとうれしいです。
次の例を実装しようとしています
http://bl.ocks.org/mbostock/4566102
大きなグラフの場合、ユーザーが現在の境界の外にドラッグすると、グラフが切り取られずにスクロールできるようにするだけです。
overflow:scroll プロパティを svg 要素に追加しようとしましたが、うまくいかないようです。私はこの javascript/d3.js プログラミングに慣れていないので、誰かがエラーを指摘したり、正しい方向に導いてくれるとうれしいです。
svg を十分に大きくして、overflow: auto で小さな div にラップするのはどうですか?
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%;
}
赤い円を表示領域の外にドラッグできます。
残念ながら、これは JavaScript の介入なしでは不可能です。ルートsvg
要素には幅と高さが定義されている必要があり、その内容にはまったく適応しません。
あなたがグーグルに行くなら、あなたの質問は約svg
以上のものd3
です.
svg
1 つのオブジェクトが背後にあるときのサイズを大きくするために、javascript を使用することが唯一の可能性だと思います。このように、しかし、私は左側でそれを機能させる方法を理解できず、複雑になります。
上記のズーム動作のように、d3 が提供できるソリューションで問題に取り組む方が良いと思います。そして、一般的に、この分野に慣れていない場合は、実装に進む前にインタラクションを考え、d3 ギャラリーから例を選んで、本当に必要なものをよりよく理解することをお勧めします。