D3 및 전단지 - svg 서클이 표시되지 않음

SVG 서클을지도 배경에 그려 넣으 려하지만 Chrome Dev 도구를 사용하여 요소에 표시되는 동안 페이지에 SVG 서클이 표시되지 않습니다. 내가 여기서 무엇을 놓치고 있는지, 왜 숨겨져 있나?D3 및 전단지 - svg 서클이 표시되지 않음

필자는지도와 원의 불투명도를 변경하려고했지만 렌더링되지 않은 이유를 알 수 없습니까?

내 코드 : 당신이 참고로

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Leaflet and D3 map</title> 
       <link rel="stylesheet" href="../leaflet.css" /> 
       <script type="text/javascript" src="../leaflet.js"></script> 
     <script type="text/javascript" src="../d3.js"></script> 
       <style type="text/css"> 

        #map{ 
         width: 700px; 
         height: 600px; 
        } 

       </style> 
    </head> 
    <body> 
      <div id="map"></div> 


     <script type="text/javascript"> 

         // 
         // LOAD THE MAP FROM MAPBOX & LEAFLET 
         // 
         var map = L.map("map").setView([50.0755,14.4378], 12); 

         mapLink = '<a href="http://www.mapbox.com">Mapbox</a>'; 
         L.tileLayer (
          "link to mapbox",{ 
           attribution:"&copy; " + mapLink + " Contributors", 
           maxZoom:20, 
         }).addTo(map); 

         // 
         // Create the SVG layer on top of the map 
         // 
         L.svg().addTo(map); 

         // Create the standard variables selecting the SVG in the map element 
         var svg = d3.select("#map").append("svg"); 
         var g = svg.append("g"); 

      //Load the coordinate for the circle 
      var objects = [ {"circle":{"coordinates":[50.0755,14.4378]}}]; 

      //Loop through to create a LatLng element that can be projected onto Leaflet map 
      for(var i = 0;i<objects.length;i++){ 
       objects[i].LatLng = new L.LatLng(objects[i].circle.coordinates[0], objects[i].circle.coordinates[1]) 
      }; 

      //Create the circle object and store it in features 
      var feature = g.selectAll("circle") 
      .data(objects) 
      .enter() 
      .append("circle") 
      .style("fill", "red") 
      .attr("r", 20); 


      //Make the circle dynamic, by calling the update function whenever view is view is reset 
      map.on("viewreset", update) 

      //Call the update also on first load of the web page 
      update(); 

      //Updates the position of the circle every time the map is updated 
      function update(){ 
       feature.attr("transform", 
       function(d){ 
       return "translate("+ 
        map.latLngToLayerPoint(d.LatLng).x+","+ 
        map.latLngToLayerPoint(d.LatLng).y+")"; 
       }) 

      }; 

     </script> 
    </body> 
</html>

출처

2017-12-30 Svarto

, 당신의 원이 추가됩니다 :

하지만, 그렇지 때문에 투명도 나 색상의 눈에 보이지 않는,하지만 당신이 있기 때문에하지 svg의 크기를 설정하십시오. svg의 기본 크기를 사용하면 서클의 테두리가 벗어나서 숨겨집니다 (지도 중앙의 [350,300]에있는 반면, svg의 기본 크기는 300x150 브라우저의 의존 가능성이 있습니다). 시도 :지도로

var svg = d3.select("#map") 
    .append("svg") 
    .attr("width",700) 
    .attr("height",600)

에 걸쳐 700 픽셀, 높이 600 픽셀입니다.

출처

2017-12-31 01:27:28

D3 및 전단지 - svg 서클이 표시되지 않음

답변

관련 문제