Question

我成功地绘制了一张地图，并从csv绘制了点。文件就可以了。

但是当我尝试添加一个画笔（它应该以原始颜色为画笔中的圆圈着色，而外部的那些应该具有较低的不透明度 - 并且当释放画笔时，所有的圆圈应该再次具有相同的颜色），出了问题 - 地图显示得非常快，然后整个svg变成了单一的颜色。

我是d3的新手，刚刚尝试过这个例子：http://bl.ocks.org/feyderm/6bdbc74236c27a843db633981ad22c1b。我无法弄清楚它是否与投影或完全不同的东西有关。

我的尝试如下所示：

<!DOCTYPE html>
...
    <style type="text/css">

        .brushed {

            fill: white;
            stroke: black;
            stroke-width: 0.5;
            opacity: 0.95;

        }

        .non_brushed {

            fill: grey;
            opacity: 0.15;

        }

    </style>
</head>
<body>
    <script type="text/javascript">

        //Width and height
        var w = 500;
        var h = 500;

        var padding = 60;

        //Define path generator, using the mercator projection
        var projection = d3.geoMercator()
                    .scale(90*w)
                    .translate([58350, 35330]);

        var path = d3.geoPath()
                     .projection(projection);


        //define borough colors
        var color = ["rgb(0,59,86)","rgb(63,72,77)",
                    "rgb(243,142,50)", "rgb(246,99,36)", "rgb(21,108,108)"];

        //Create SVG element
        var svg_map = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);


        //Load in GeoJSON data
        d3.json("boroughs.json", function(json) {

            //Bind data and create one path per GeoJSON feature
            svg_map.selectAll("path")
               .data(json.features)
               .enter()
               .append("path")
               .attr("d", path)
               .style("stroke","white")
               .style("stroke-width","1px")
               .style("fill",function(d,i){    

                    return color[i];

                });

            //load in csv data
            d3.csv("blabla.csv",function(data){

                //create circle elements
                var circles = svg_map.append("g")
                    .selectAll("circle")
                    .data(data)
                    .enter()
                    .append("circle")
                    .attr("class","brushed")  //original color
                    .attr("cx", function(d){                       

                            return projection([d.Lon,d.Lat])[0];

                    })
                    .attr("cy", function(d){

                            return projection([d.Lon,d.Lat])[1];

                    })
                    .attr("r",3);

                //create brush
                var brush = d3.brush()
                    .on("brush", highlightBrushedCircles)
                    .on("end", brushEnd); 

                svg_map.append("g")
                    .call(brush);

                function highlightBrushedCircles() {

                    if (d3.event.selection != null) {

                        // set circles to "non_brushed"
                        circles.attr("class", "non_brushed");

                        //coordinates describing the corners of the brush
                        var brush_coords = d3.brushSelection(this);

                        // set the circles within the brush to class "brushed" to style them accordingly
                        circles.filter(function (){

                           var cx = d3.select(this).attr("cx"),
                               cy = d3.select(this).attr("cy");

                           return isBrushed(brush_coords, cx, cy);
                       })
                       .attr("class", "brushed");

                    }
                }

                function isBrushed(brush_coords, cx, cy) {

                    //the corners of the brush
                    var x0 = brush_coords[0][0],
                        x1 = brush_coords[1][0],
                        y0 = brush_coords[0][1],
                        y1 = brush_coords[1][1];

                    //checks whether the circle is within the brush
                    return x0 <= cx && cx <= x1 && y0 <= cy && cy <= y1;
                }

                function brushEnd() {

                    if (!d3.event.selection) return;

                    // programmed clearing of brush after mouse-up
                    d3.select(this).call(brush.move, null);

                    //set all circles to original color
                    svg_map.selectAll(".non_brushed").classed("brushed", true);

                }

            });
        });


    </script>
</body>

Answer 1

我得到了它的工作 - 似乎问题是我在我的风格css文件中也有这个：

 rect {

            fill: rgb(21,108,108);
            shape-rendering: CrispEdges;

        }

然后只是将整个svg着色了:)

d3：地图问题上的刷点

1 个答案: