2017-09-19 29 views
-1

私はSVGをズームするのにd3を使います。スクロールバーは、SVGのボタンがコンテナの底に達すると表示されます

スクロールバーは、svgの特定の部分が表示されない場合(私の例では2つの矩形)にのみ表示したいと考えています。

私の問題は、スクロールバーは、svgのボトムラインがボディのボトムラインに達するときにのみ表示されることです。私は一番上の行についても同じことを望みます。

この写真では、黄色の背景が体の底に届くので、私にはスクロールバーを取得する感覚を与えます。

enter image description here

なぜスクロールバーを例に表示されませんか? SVGのトップが表示されていない予想通りのStackOverflowでのスニペットは動作しませんので...ここで

enter image description here

は、JSビンです:http://jsbin.com/wewikokova/1/edit

var svg = d3.select('svg'); 
 
var body = d3.select('body'); 
 

 
body.call(d3.zoom().on('zoom', function() { 
 
    svg.node().setAttribute('transform', d3.event.transform); 
 
}));
body { 
 
    background: white; 
 
    
 
    width: 100%; 
 
    height: 100%; 
 
    
 
    overflow: auto; 
 
} 
 

 
svg { 
 
    background: yellow; 
 
    
 
    width: 1000px; 
 
    height: 500px; 
 
} 
 

 
.item-1 { 
 
    fill: blue; 
 
    
 
    x: 489px; 
 
    y: 38px; 
 
    width: 64px; 
 
    height: 36px; 
 
} 
 

 
.item-2 { 
 
    fill: blue; 
 
    
 
    x: 590px; 
 
    y: 60px; 
 
    width: 102.4px; 
 
    height: 60px; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script> 
 
</head> 
 
<body> 
 
    <svg xmlns="http://www.w3.org/2000/svg" transform-origin="0 0" viewBox="489 38 203 82"> 
 
     <g> 
 
\t \t \t <rect class="item-1" /> 
 
\t \t \t \t <rect class="item-2" /> 
 
\t \t \t </g> 
 
    </svg> 
 
</body> 
 
</html>

+0

この質問に関連しているようですhttps://stackoverflow.com/questions/27374111/how-can-i-have-scrollbar-when-position-is-negativeコンテンツがトップにスローされるときはスクロールバーがありません。 – Charles

答えて

0

これは正常で、上部ウィンドウと左ウィンドウがスクロールトリガーではないため、スクロールバーを使わずにdivマージン - 上部またはマージンをマイナスに設定することができます。

+0

ここに解決策はありませんか? – Charles

+0

私は想像することができませんが、私は想像しているものは厄介なものですが、私は言うべきではない、おそらくいくつかのソリューションexisそのidk、今私の小さなknowladgeと私はasumeはい – KEKUATAN

関連する問題