d3：地图刷点问题答案

【问题标题】：d3: brushing points on map issued3：地图刷点问题
【发布时间】：2018-03-15 21:51:19
【问题描述】：

我已成功绘制地图并从 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>

【问题讨论】：

你能分享boroughs.json吗？
是的，我可以这样做——但是当我不包括画笔时它可以很好地绘制地图，所以我认为它没有什么可说的:)
这是为了重现您的图表。
dropbox.com/s/xc0hjf3fa7phv6z/boroughs.json?dl=0
你不希望元素有两个类。所以，在最后一行，而不是svg_map.selectAll(".non_brushed").classed("brushed", true)，做svg_map.selectAll(".non_brushed").attr("class", "brushed")。这将覆盖 non_brushed 类。

标签： javascript d3.js

【解决方案1】：

我让它工作了 - 问题似乎是我在我的样式 css 文件中也有这个：

 rect {

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

        }

然后像这样为整个 svg 着色:)

【讨论】：