2

次の例を実装しようとしています

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

大きなグラフの場合、ユーザーが現在の境界の外にドラッグすると、グラフが切り取られずにスクロールできるようにするだけです。

overflow:scroll プロパティを svg 要素に追加しようとしましたが、うまくいかないようです。私はこの javascript/d3.js プログラミングに慣れていないので、誰かがエラーを指摘したり、正しい方向に導いてくれるとうれしいです。

4

2 に答える 2

3

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%;
}

デモ

赤い円を表示領域の外にドラッグできます。

于 2013-08-04T10:42:13.457 に答える
0

残念ながら、これは JavaScript の介入なしでは不可能です。ルートsvg要素には幅と高さが定義されている必要があり、その内容にはまったく適応しません。

あなたがグーグルに行くなら、あなたの質問は約svg以上のものd3です.

svg1 つのオブジェクトが背後にあるときのサイズを大きくするために、javascript を使用することが唯一の可能性だと思います。このように、しかし、私は左側でそれを機能させる方法を理解できず、複雑になります。

上記のズーム動作のように、d3 が提供できるソリューションで問題に取り組む方が良いと思います。そして、一般的に、この分野に慣れていない場合は、実装に進むにインタラクションを考え、d3 ギャラリーから例を選んで、本当に必要なものをよりよく理解することをお勧めします。

于 2013-08-03T19:24:54.663 に答える