D3에서 .translateExtent를 사용하면 확대/축소시 'NaN'x 및 y 값을 반환합니다.

사용자가 내가 만든지도에서 너무 멀리 패닝하지 못하도록하고 싶습니다. 그러나 .translateExtent() 함수를 적용하는 데 어려움을 겪고 있습니다.D3에서 .translateExtent를 사용하면 확대/축소시 'NaN'x 및 y 값을 반환합니다.

아래의 단순화 된 예 (지도를 정사각형으로 바꿨 음)는 문제를 재현합니다. 코드는 .translateExtent() 기능을 제거하면 작동합니다.

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <script src="https://d3js.org/d3.v4.min.js"></script> 
 
    <style> 
 
     #svg { 
 
     background-color: rgb(239, 239, 244); 
 
     } 
 
     #shape { 
 
     fill: rgb(0, 75, 122); 
 
     stroke: white; 
 
     stroke-width: 3px; 
 
     } 
 
     #shape:hover { 
 
     fill: rgb(150, 30, 27); 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <script> 
 
     var width = 300, 
 
      height = 300; 
 

 
     var container = d3.select("body").append("div"); 
 

 
     var svg = container.append("svg") 
 
      .attr("id", "svg") 
 
      .attr("width", width) 
 
      .attr("height", height); 
 

 
     var group = svg.append("g"); 
 

 
     var shape = group.append("rect") 
 
       .attr("id", "shape") 
 
       .attr("width", 150) 
 
       .attr("height", 150) 
 
       .attr("x", 75) 
 
       .attr("y", 75); 
 

 
     zoom = d3.zoom() 
 
      .scaleExtent([1, 3]) 
 
      .translateExtent([0, 0], [width, height]) 
 
      .on("zoom", zoomed); 
 

 
     svg.call(zoom); 
 

 
     function zoomed() { 
 
     change = d3.event.transform; 
 
     console.log(change) 
 
     group.attr("transform", "translate(" + [change.x, change.y] + ")scale(" + change.k + ")") 
 
     group.select("#shape").style("stroke-width", (3/change.k) + "px"); 
 
     } 
 
    </script> 
 
    </body> 
 
</html>

콘솔의 오류 메시지는 다음과 같습니다

Error: attribute transform: Expected number, "translate(NaN,NaN)scale(1)".

나는 팬/줌은 x와 y에 대한 'NaN이'값을 반환하는 이유를 이해하지만, 수 없습니다 .translateExtent()과 관련이 있습니다. 현재 규모의 값을 사용하여 범위를 변환해야하는 추가 단계가 있다고 생각하지만 온라인에서 본 예제 중 어느 것도 필요하지 않은 것으로 보입니다.

출처

2017-11-30 Markus

D3.zoom translateExtent는 두 개의 배열 제공 한

If extent is specified, sets the translate extent to the specified array of points [[x0, y0], [x1, y1]]

입력 한 배열한다 :

.translateExtent([0, 0], [width, height])

을 배열이 중첩보십시오 :

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <script src="https://d3js.org/d3.v4.min.js"></script> 
 
    <style> 
 
     #svg { 
 
     background-color: rgb(239, 239, 244); 
 
     } 
 
     #shape { 
 
     fill: rgb(0, 75, 122); 
 
     stroke: white; 
 
     stroke-width: 3px; 
 
     } 
 
     #shape:hover { 
 
     fill: rgb(150, 30, 27); 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <body> 
 
    <script> 
 
     var width = 300, 
 
      height = 300; 
 

 
     var container = d3.select("body").append("div"); 
 

 
     var svg = container.append("svg") 
 
      .attr("id", "svg") 
 
      .attr("width", width) 
 
      .attr("height", height); 
 

 
     var group = svg.append("g"); 
 

 
     var shape = group.append("rect") 
 
       .attr("id", "shape") 
 
       .attr("width", 150) 
 
       .attr("height", 150) 
 
       .attr("x", 75) 
 
       .attr("y", 75); 
 

 
     zoom = d3.zoom() 
 
      .scaleExtent([1, 3]) 
 
      .translateExtent([[0, 0], [width, height]]) 
 
      .on("zoom", zoomed); 
 

 
     svg.call(zoom); 
 

 
     function zoomed() { 
 
     change = d3.event.transform; 
 
     console.log(change) 
 
     group.attr("transform", "translate(" + [change.x, change.y] + ")scale(" + change.k + ")") 
 
     group.select("#shape").style("stroke-width", (3/change.k) + "px"); 
 
     } 
 
    </script> 
 
    </body> 
 
</html>

출처

2017-11-30 03:43:52

오, 이런, 다시 한번 고마워요! 당황 스럽네요. 대괄호 두 개를 하나로 오인 한 건 처음이 아니에요. – Markus

D3에서 .translateExtent를 사용하면 확대/축소시 'NaN'x 및 y 값을 반환합니다.

답변

관련 문제