我想在d3.js映射中更改当前选定功能的颜色。但是,我的代码更改了我单击的每个功能的颜色。如何重置地图,以便当我单击一项功能时,以前单击的所有其他功能都将重置为默认颜色?下面是我的代码。颜色变化发生在“点击”功能上:
function ready(error, us) {
svg.append("g")
.selectAll("path")
.data(topojson.feature(us, us.objects.ecol3_wgs84).features)
.enter()
.append("path")
.attr("transform", "scale(" + SCALE + ")") //scale the map
.attr("class", "region")
.attr("ecoregion", function (d, i) {
return us.objects.ecol3_wgs84.geometries[i].properties.US_L3NAME;
})
.attr("d", path)
.on("mouseover", function (d) {
d3.select("h3").text(d.properties.US_L3NAME);
d3.select(this).attr("class", "region hover");
})
.on("mouseout", function (d) {
d3.select("h3").text("");
d3.select(this).attr("class", "region");
})
.on("click", function (d) {
var name = d.properties.US_L3NAME;
var region = d3.select("#regName");
region.property("value", name);
d3.select(this).style("fill", getColor(name));
});
}
function getColor(n) {
var selectedRegion = "";
selectedRegion = $("#regName").val();
if (n == …Run Code Online (Sandbox Code Playgroud) 我有一张美国县地图,应该在动画中显示14天内县的水量.我需要显示红色(小于50毫米),绿色(大于49毫米且小于100毫米)和蓝色(大于100毫米)的颜色.我改编自Mike Bostock和Rich Donohue以下代码:
<style>
.county {
fill:steelblue;
stroke: #fff; /*White*/
stroke-width: .5px;
}
#play, #clock {
position: absolute;
/*top: 15px;*/
}
#play {
/*left: 15px;*/
left: 160px;
top: 140px;
}
#clock {
left: 220px;
top: 148px;
}
Run Code Online (Sandbox Code Playgroud)
<button id="play">Play</button>
<span id="clock">Day</span>
<h1 style="text-align:center">14-Day Water Yield By County</h1>
<div id="svgDiv1" style="text-align:center">
<svg width="960" height="600" stroke-linejoin="round" stroke-linecap="round">
<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="5"></feGaussianBlur>
</filter>
</defs>
</svg>
Run Code Online (Sandbox Code Playgroud)
<script>
//globals
var width, height, projection, path, group, graticule, svg, defs, attributeArray = [], currentAttribute = 0, …Run Code Online (Sandbox Code Playgroud) d3.js ×2