d3 확대/축소 버전 4로 업그레이드

아래 코드를 버전 4에서 업데이트하면 도움이 될 것입니다. zoom.behaviour를 d3.zoom으로 변경했는데 필요한 다른 변경 사항이 명확하지 않습니다. v3보다 복잡해 보입니다!d3 확대/축소 버전 4로 업그레이드

.call(d3.zoom().on("zoom", function() { 
    svg.attr("transform", "translate(" + d3.event.translate 
    + ")" + " scale(" + d3.event.scale + ")") 
}))

이 사람 :이

<!DOCTYPE html> 
<html> 
    <head> 
    <!-- <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>--> 

    <script data-require="[email protected]" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script> 

    <style type="text/css"> 
     body, html { 
     width: 100%; 
     height: 100%; 
     margin: 0; 
     } 
     svg { 
     position: absolute; 
     top: 0; 
     left: 0; 
     } 
     p { 
     text-align: center; 
     } 
    </style> 
    </head> 
    <body> 
    <p>Use the mouse to pan (click and move)/zoom (scrollwheel)</p> 
    </body> 
    <script type="text/javascript"> 
     var svg = d3.select("body") 
     .append("svg") 
     .attr("width", "100%") 
     .attr("height", "100%") 
     .call(d3.zoom().on("zoom", function() { 
      svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")") 
     })) 
     .append("g") 

     svg.append("circle") 
     .attr("cx", document.body.clientWidth/2) 
     .attr("cy", document.body.clientHeight/2) 
     .attr("r", 50) 
     .style("fill", "#B8DEE6") 
    </script> 
</html>

출처

2016-07-19 user3359706

변경 여기

.call(d3.zoom().on("zoom", function() { 
     svg.attr("transform", d3.event.transform) 
}))

이 바이올린입니다 : https://jsfiddle.net/gerardofurtado/c8bga82b/

출처

2016-07-19 13:56:16

입니다 대단히 감사합니다. x 축 만 확대 할 수 있는지 알고 있습니까? 이전에 나는 zoom = d3.zoom.transform() .x (xRange) //.y(yy) – user3359706

을 사용했습니다. 이것은 SVG에서 뷰 박스를 사용하고 있는데, 그것은 깨지기 쉬운 것 같습니다. – SumNeuron

내가 대답에 귀하의 코멘트에 회신 할 수는 없지만 x 축 만 확대/축소하는 방법은 다음과 같습니다.

svg.attr(
    "transform", 
    'translate('+d3.event.transform.x+',0) scale('+d3.event.transform.k+',1)' 
)}))

는 jsFiddle 업데이트 : https://jsfiddle.net/axge6a04/1/

출처

2016-09-09 16:37:11 twoje

당신이 최고입니다! –

허용 된 대답은 위대하다! 경계에서 원하는 분들 제한 팬 & 줌 (같은 here)에 대한

..이

변경 :

// width, height = viewport width, height 
.call(d3.zoom().on("zoom", function() { 
    var tx = Math.min(0, Math.max(d3.event.translate[0], width - width * d3.event.scale)); 
    var ty = Math.min(0, Math.max(d3.event.translate[1], height - height * d3.event.scale)); 
    svg.attr("transform", "translate(" + [tx, ty] + ") scale(" + d3.event.scale + ")"); 
});

이 사람 :

.call(d3.zoom().on("zoom", function() { 
    d3.event.transform.x = Math.min(0, Math.max(d3.event.transform.x, width - width * d3.event.transform.k)); 
    d3.event.transform.y = Math.min(0, Math.max(d3.event.transform.y, height - height * d3.event.transform.k)); 
    svg.attr("transform", d3.event.transform); 
}));

출처

2017-01-03 09:37:02 raphodn

위대한, 정확히 내가 필요한 것! 많은 예제는 줌 객체 자체를 업데이트하기 위해'zoom.transform ([tx, ty])'를 가지고 있지만 그 함수는 사라졌습니다. –

d3 확대/축소 버전 4로 업그레이드

답변

관련 문제