通过函数--D3.js将特定类分配给特定的县

时间：2017-04-09 06:43:16

标签： javascript d3.js

我正在尝试编写一个将某些县ID分配给某个类的函数。我使用onclick编写了功能，但是使用了DOM元素。下面是代码的修剪版本，输出不是指定蓝色类，它只是删除现有的类并将县变为黑色：

JSFiddle 

<!DOCTYPE html>
<style>

.c550000 {
    fill: blue;
    stroke-width: .5px;
}

.counties .hovered,
.counties :hover {
    fill: #ffffff;
    stroke-width: .5px;
}

.county-borders {
    fill: none;
    stroke: #F0F8FF;
    stroke-width: .2px;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
}

.state-borders {
    fill: none;
    stroke: #162955;
    opacity: .8;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
}

</style>

<svg class="map" width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>
var svg = d3.select("svg");
var path = d3.geoPath();

d3.json("https://d3js.org/us-10m.v1.json", function(error, us) {
    if (error) throw error;

        var jsonCounties = us.objects.counties.geometries;

        function loadCurrent() {
            for (var i = 0; i < jsonCounties.length; i++) {
                if (jsonCounties[i].id == 32007) { //Random county id for testing
                    var geoCounty = us.objects.counties.geometries.filter(function(d) {return d.id == 32007;});
                    us.objects.counties.geometries = geoCounty;

                    var county = topojson.feature(us, us.objects.counties);

                    svg.append("g")
                        .attr("class", "c550000") //apply this attribute to this county
                        .selectAll("path")
                        .data(county)
                        .enter()
                        .append("path")
                        .attr("d", path);
                }
            }
        }

        loadCurrent();

        svg.append("g")
            .attr("class", "counties")
            .selectAll("path")
            .data(topojson.feature(us, us.objects.counties).features)
            .enter()
            .append("path")
            .attr("d", path);

        svg.append("g")
            .attr("class", "state-borders")
            .selectAll("path")
            .data(topojson.feature(us, us.objects.nation).features)
            .enter()
            .append("path")
            .attr("d", path);
        svg.append("path")
            .attr("class", "state-borders")
            .attr("d", path(topojson.mesh(us, us.objects.nation, function(a, b) {
                return a !== b;
            })));
        svg.append("path")
            .attr("class", "state-borders")
            .attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) {
                return a !== b;
            })));
        svg.append("path")
            .attr("class", "county-borders")
            .attr("d", path(topojson.mesh(us, us.objects.counties, function(a, b) {
                return a !== b;
            })));
});
</script>

2 个答案:

答案 0 :(得分：0)

不确定这是你想要实现的目标，但这会使路径变为蓝色：

       svg.append("g")
        .attr("class", "counties")
        .selectAll("path")
        .data(topojson.feature(us, us.objects.counties).features)
        .enter()
        .append("path")
        .attr("class", "c550000") //apply this attribute to this county
        .attr("d", path);

您应该使用数据绑定来执行此操作 - 我将构建数据，以便县将成为数据的一部分，因此我可以像这样编写类分配行：

.attr("class", function(d) { return d.county.name }) // just an example

如果您需要设置多个课程，请考虑使用： selection.classed

答案 1 :(得分：0)

如果您打算绘制所有县，但根据某些条件将特定类别分配给一个，那么简化为：

svg.append("g")
  .attr("class", "counties")
  .selectAll("path")
  .data(topojson.feature(us, us.objects.counties).features)
  .enter()
  .append("path")
  .attr("d", path)
  .classed("c550000",function(d){
    return d.id === "32007";
  });

如果您只想绘制一个县并对其进行分类，请简化：

svg.append("g")
  .attr("class", "counties")
  .selectAll("path")
  .data(topojson.feature(us, us.objects.counties).features)
  .enter()
  .filter(function(d){
    return d.id === "32007";
  })
  .append("path")
  .attr("d", path)
  .classed("c550000", true);

评论的编辑

我会使它非常数据驱动，例如：

var classMap = {
 "class1": [41015, 02150, 44007],
 "class2": [45085, 06107, 17127],
 "class3": [37147, 17127, 06107],
 "c550000": [32007]      
};

svg.append("g")
  .attr("class", "counties")
  .selectAll("path")
  .data(topojson.feature(us, us.objects.counties).features)
  .enter()
  .append("path")
  .attr("d", path)
  .each(function(d){
    for (var key in classMap){
      if (classMap[key].indexOf(+d.id) !== -1){
        d3.select(this).classed(key, true);
      }
    }
  });

这是运行代码：

var svg = d3.select("svg");
var path = d3.geoPath();

d3.json("https://d3js.org/us-10m.v1.json", function(error, us) {
    if (error) throw error;
    
      var classMap = {
        "class1": [41015, 02150, 44007],
        "class2": [45085, 06107, 17127],
        "class3": [37147, 17127, 06107],
        "c550000": [32007]      
      };

        svg.append("g")
            .attr("class", "counties")
            .selectAll("path")
            .data(topojson.feature(us, us.objects.counties).features)
            .enter()
            .append("path")
            .attr("d", path)
            .each(function(d){
              for (var key in classMap){
                if (classMap[key].indexOf(+d.id) !== -1){
                  d3.select(this).classed(key, true);
                }
              }
            });

        svg.append("g")
            .attr("class", "state-borders")
            .selectAll("path")
            .data(topojson.feature(us, us.objects.nation).features)
            .enter()
            .append("path")
            .attr("d", path);
        svg.append("path")
            .attr("class", "state-borders")
            .attr("d", path(topojson.mesh(us, us.objects.nation, function(a, b) {
                return a !== b;
            })));
        svg.append("path")
            .attr("class", "state-borders")
            .attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) {
                return a !== b;
            })));
        svg.append("path")
            .attr("class", "county-borders")
            .attr("d", path(topojson.mesh(us, us.objects.counties, function(a, b) {
                return a !== b;
            })));
});
.c550000 {
    fill: blue;
    stroke-width: .5px;
}

.class1 {
    fill: blue;
    stroke-width: .5px;
}

.class2 {
    fill: red;
    stroke-width: .5px;
}

.class3 {
    fill: green;
    stroke-width: .5px;
}

.counties .hovered,
.counties :hover {
    fill: #ffffff;
    stroke-width: .5px;
}

.county-borders {
    fill: none;
    stroke: #F0F8FF;
    stroke-width: .2px;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
}

.state-borders {
    fill: none;
    stroke: #162955;
    opacity: .8;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
}
<svg class="map" width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>

相关问题
最新问题