d3：在地图问题上刷点
[英]d3: brushing points on map issue
问题描述
I have succesfully drawn a map and plotted points from a csv. 
我已经成功绘制了地图并从csv绘制了点。 file on it. 档案就可以了。
But when I try to add a brush (which should color the circles within the brush in the original color, and the ones outside should have a lower opacity - and when releasing the brush all circles should again have the same color), something goes wrong - The map is shown very quickly and then the entire svg just turns into a single color. 但是，当我尝试添加画笔时（该画笔应以原始颜色为画笔中的圆圈上色，而外部画笔的透明度应较低-松开画笔时，所有圆圈应再次使用相同的颜色），出现了问题-地图显示非常迅速，然后整个svg变成单一颜色。
I am pretty new to d3 and have just tried to follow this example: http://bl.ocks.org/feyderm/6bdbc74236c27a843db633981ad22c1b . 我对d3相当陌生，并尝试遵循以下示例： http : //bl.ocks.org/feyderm/6bdbc74236c27a843db633981ad22c1b 。 I can't really figure out if it might have something to do with the projection or something totally different.. 我真的不知道它是否与投影有关或完全不同。
My attempt is shown below: 我的尝试如下所示：
<!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>
1 个解决方案
解决方案1
0 2018-03-15 13:51:19
I got it to work - it seemed that the problem was that I in my style css file also had this: 我让它工作了-似乎问题是我的风格css文件中也包含以下内容：
rect {
fill: rgb(21,108,108);
shape-rendering: CrispEdges;
}
Which then just colored the entire svg like that :) 然后只是像这样给整个svg上色:)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.