1. ホーム
  2. 質問と答え
  3. 特定のクラスを特定の郡に割り当てる - D3.js

特定のクラスを特定の郡に割り当てる - D3.js

2017-04-09 11 views
0

特定の郡IDに特定のクラスを割り当てる関数を作成しようとしています。私はonclickを使って機能を書いたが、それはDOM要素を利用していた。以下は、コードのトリミングバージョンである出力は青のクラスを割り当てていない、それだけで、既存のクラスを削除し、郡の黒を回しています：特定のクラスを特定の郡に割り当てる - D3.js

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>

出典

2017-04-09 Matthew Snell

答えて

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

出典

2017-04-09 10:49:44 thedude

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);
0123コメント FOR

EDITS

私はそれが非常にデータ駆動型、何かのようになるだろう。ここでは

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>

出典

2017-04-09 13:52:11 Mark

+0

感謝レスポンスマーク！最終的な目標は、マップ上のすべての郡に10のクラスの1つを割り当てることです。申し訳ありませんが、指定してください。上記のコードは、forループのマクロスケールにも適用されますか？ –

+0

@MatthewSnell、上記の編集を参照してください。 – Mark

関連する問題

 関連する問題