D3バージョン4で水平ズーム？

D3バージョン4では、ズームをx軸だけに制限するにはどうすればよいですか？無制限のズームとD3バージョン4で水平ズーム？

例：

var sideLength = 190; 
 
var data = [ 
 
    [0, 0], 
 
    [0.5, 0.8], 
 
    [1, 0.4] 
 
]; 
 
var svg = d3.select("body") 
 
    .append("svg") 
 
    .attr("width", sideLength) 
 
    .attr("height", sideLength); 
 
var yScale = d3.scaleLinear().range([sideLength, 0]); 
 
var xScale = d3.scaleLinear().range([0, sideLength]); 
 
var graphGroup = svg.append("g"); 
 
var onZoom = function() { 
 
    graphGroup.attr("transform", d3.event.transform); 
 
}; 
 
var zoomBehavior = d3.zoom().on("zoom", onZoom); 
 
var line = d3.line() 
 
    .x(function(d) { 
 
    return xScale(d[0]); 
 
    }) 
 
    .y(function(d) { 
 
    return yScale(d[1]); 
 
    }); 
 

 
svg.call(zoomBehavior); 
 
graphGroup.selectAll("path").remove(); 
 
graphGroup.append("path") 
 
    .datum(data) 
 
    .attr("class", "line") 
 
    .attr("d", line);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>D3 Zoom</title> 
 
</head> 
 

 
<body> 
 
    <script src="http://d3js.org/d3.v4.min.js"></script> 
 
</body> 
 

 
</html>

出典

2016-09-03 feklee

私は、あなたが「ただのx軸にズームを制限する」ことにより、正確に探しているかわからないが、あなたが意味する場合は、Y軸が欲しいですズームするときに手を触れないようにして（ひいては形状が歪む）、手動で変形機能を構築することができます。

d3.event.transformは、ズームポイントとスケールの座標である3つの属性xとyとkを持っています。

d3.event.transform.toStringはあなたに以下のような文字列を与えるだろう：

translate(x, y) scale(k)を、あなたが変換に精通している場合、あなたはすでにあなたの所望の変換を作成する方法を知っています。しかし、元の変換の2つの部分は次のとおりです。

translate(x, y)：ポイントマウスがポイントしているときにズームした理由があります。実際にオブジェクトを移動するので、この部分を削除すると、キャンバスは中心を基準にしてスケールされます。

scale(k)キャンバスをスケールします。

y軸の縮尺を変えたくない場合は、y軸の縮尺にargを追加して渡すことができます。だから、

あなただけが持っていること（スケーリングしていないと翻訳されていない）、Y軸はそのままになりたい場合は：あなたはgraphGroup上の歪みを防止する方法を

var sideLength = 190; 
 
var data = [ 
 
    [0, 0], 
 
    [0.5, 0.8], 
 
    [1, 0.4] 
 
]; 
 
var svg = d3.select("body") 
 
    .append("svg") 
 
    .attr("width", sideLength) 
 
    .attr("height", sideLength); 
 
var yScale = d3.scaleLinear().range([sideLength, 0]); 
 
var xScale = d3.scaleLinear().range([0, sideLength]); 
 
var graphGroup = svg.append("g"); 
 
var onZoom = function() { 
 
var transform = d3.event.transform; 
 
    var transformString = 'translate(' + transform.x + ',' + '0) scale(' + transform.k + ',1)'; 
 
    graphGroup.attr("transform", transformString); 
 
}; 
 
var zoomBehavior = d3.zoom().on("zoom", onZoom); 
 
var line = d3.line() 
 
    .x(function(d) { 
 
    return xScale(d[0]); 
 
    }) 
 
    .y(function(d) { 
 
    return yScale(d[1]); 
 
    }); 
 

 
svg.call(zoomBehavior); 
 
graphGroup.selectAll("path").remove(); 
 
graphGroup.append("path") 
 
    .datum(data) 
 
    .attr("class", "line") 
 
    .attr("d", line);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>D3 Zoom</title> 
 
</head> 
 

 
<body> 
 
    <script src="http://d3js.org/d3.v4.min.js"></script> 
 
</body> 
 

 
</html>

出典

2016-09-04 13:29:20 Mehraban

を知っていますか？見栄えの悪いライン –

@TomRoggeroどういう意味ですか？ xとyの両方をズームしないと、シェイプのアスペクト比が変わります。 – Mehraban

D3バージョン4で水平ズーム？

答えて

関連する問題