小编use*_*113的帖子

在d3.js中更改所选地图要素的颜色

我想在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)

d3.js

4
推荐指数
1
解决办法
1144
查看次数

如何根据数据值将特定颜色应用于D3.js贴图?

我有一张美国县地图,应该在动画中显示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

4
推荐指数
1
解决办法
6887
查看次数

标签 统计

d3.js ×2