Question

我正在尝试在地图背景上绘制SVG圆圈，但是当它们显示在元素中时（使用Chrome开发工具），它们不会显示在页面上。我在这里错过了什么，他们为什么被隐藏？

我曾尝试更改地图和圆圈的填充，不透明度，但我无法弄清楚它为什么不渲染？

我的代码：

<!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>

Answer 1

如您所知，您的圈子已添加：

但是，它不是因为不透明度或颜色而不可见，而是因为你没有设置svg的尺寸。使用svg的默认尺寸，您的圆圈超出其边界并因此隐藏（它位于地图的中间，位于[350,300]，而svg的默认大小为300x150 可能与浏览器相关 ）。尝试：

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

因为你的地图是700像素宽，600像素高。

D3和Leaflet - svg圈没有显示

1 个答案: