D3.js 여러 차트에서 TopoJSON 렌더링

DOM의 여러 차트에 topoJson 파일을 플롯하려고했습니다. 내가 제공하는 예제에는 두 개의 차트 만 포함되어 있지만 결국에는 확장하려고합니다. 내 문제는 자바 스크립트 코드가 두 컨테이너 각각에서 정확히 같지만 topoJSON 파일은 두 번째 컨테이너에만 표시된다는 것입니다. 나는 그것이 D3의 렌더링 모드와 관련이 있다고 믿지만, 나는 그것을 이해할 수 없다. 여기에 코드와 결과 페이지가 있습니다.D3.js 여러 차트에서 TopoJSON 렌더링

P. JS 코드의 중복을 유감스럽게 생각합니다. 난 단지

<!doctype html> 
<meta charset="utf-8"> 

<script src="./js/d3.js"></script> 
<script src="./js/topojson.js"></script> 


<body> 
    First Map (Empty!!!) 
    <div id='container1'> 

    <script charset="utf-8"> 

    var width=2712/9; 
    var height=1955/9; 
    var rasterBounds=[[-1.3312652841195303 , 41.964452901889715] , [1.748235284119533 , 43.59348149262565]]; 

    var projection = d3.geo.mercator() 
     .scale(1) 
     .translate([0, 0]) 

    var b = [projection(rasterBounds[0]), projection(rasterBounds[1])], 
     s = 1/Math.max((b[1][0] - b[0][0])/width, (b[1][1] - b[0][1])/height), 
     t = [(width - s * (b[1][0] + b[0][0]))/2, (height - s * (b[1][1] + b[0][1]))/2] 
    //update projection 
    projection 
     .scale(s) 
     .translate(t) 

    // geo path generator 
    var path = d3.geo.path() 
     .projection(projection) 


    var map = d3.select('#container1').append('svg') 
     .attr('width', width) 
     .attr('height', height) 

    map.append("rect") 
     .attr("width", "100%") 
     .attr("height", "100%") 
     .attr("fill", "#E6E6E6"); 

    var color = d3.scale.ordinal() 
     .domain(["1", "2", "3"]) 
     .range(["#ffd633", "#aaff00" , "#267300"]); 


    d3.json('MapTopoFinal.json', function(error, topology) { 
      map.selectAll("path") 
       .data(topojson.feature(topology, topology.objects.Fin_Map).features) 
      .enter() 
       .append("path") 
      .attr("d", path) 
      .attr("fill", function(d) { 
       return color(d.properties.DN); 
       }) 
      .style("opacity", .6); 
    }) 


    </script> 
    </div> 


    Second Map (OK) 
    <div id='container2'> 
    <script charset="utf-8"> 

    var width=2712/9; 
    var height=1955/9; 
    var rasterBounds=[[-1.3312652841195303 , 41.964452901889715] , [1.748235284119533 , 43.59348149262565]]; 

    var projection = d3.geo.mercator() 
     .scale(1) 
     .translate([0, 0]) 

    var b = [projection(rasterBounds[0]), projection(rasterBounds[1])], 
     s = 1/Math.max((b[1][0] - b[0][0])/width, (b[1][1] - b[0][1])/height), 
     t = [(width - s * (b[1][0] + b[0][0]))/2, (height - s * (b[1][1] + b[0][1]))/2] 
    //update projection 
    projection 
     .scale(s) 
     .translate(t) 

    // geo path generator 
    var path = d3.geo.path() 
     .projection(projection) 


    var map = d3.select('#container2').append('svg') 
     .attr('width', width) 
     .attr('height', height) 

    map.append("rect") 
     .attr("width", "100%") 
     .attr("height", "100%") 
     .attr("fill", "#E6E6E6"); 

    var color = d3.scale.ordinal() 
     .domain(["1", "2", "3"]) 
     .range(["#ffd633", "#aaff00" , "#267300"]); 


    d3.json('MapTopoFinal1.json', function(error, topology) { 
      map.selectAll("path") 
       .data(topojson.feature(topology, topology.objects.Fin_Map).features) 
      .enter() 
       .append("path") 
      .attr("d", path) 
      .attr("fill", function(d) { 
       return color(d.properties.DN); 
       }) 
      .style("opacity", .6); 
    }) 

    </script> 
    </div> 

</body>

의 예를 위해 그것을했다

The resulting page

출처

2016-06-13 spyrostheodoridis

길고도 짧은 이야기 : 여러 스크립트 태그 코드를 분리하는 것은 다른 범위를 생성하지 않습니다.

지금은 스크립트의 여러 변수를 두 번 사용하고 있습니다. 가장 중요한 것은 map입니다.

var map2 = d3.select('#container2').append('svg') 
    .attr('width', width) 
    .attr('height', height)

을 그리고 map2 또는 무엇에 모든 후속 map 변경이에

var map = d3.select('#container2').append('svg') 
    .attr('width', width) 
    .attr('height', height)

를이에서 두 번째지도를 변경합니다. 또한 color, projection 등의 중복 변수를 모두 변경하십시오.

스크립트를 분리하지 마십시오. 브라우저가 나머지 HTML을 계속 구문 분석하기 전에 각 스크립트를 구문 분석해야하기 때문에 HTML에 퍼져있는 방식이 가장 좋은 방법은 아닙니다. 추가로 문제가 발생할 수 있습니다. 모든 스크립트를 함께 <script></script>body 끝 부분에 넣으십시오.

여러 <script> 태그를 사용하면 JavaScript에서 다른 범위를 정의하지 않는다는 점에 유의하십시오.

출처

2016-06-13 12:11:21

유용한 의견을 보내 주셔서 감사합니다. 약간 다른 접근법을 따르고 하나의 인수, 즉 컨테이너 div가있는 함수에서 JS 코드를 래핑했습니다. 그런 다음 각 div마다 플로팅 함수를 별도로 호출했습니다. – spyrostheodoridis

이제 함수를 사용하면 범위가 달라집니다! –

D3.js 여러 차트에서 TopoJSON 렌더링

답변

관련 문제