2017-09-13 7 views
0

D3.jsのTopojson機能を使ってsvgワールドマップを作成しています。私はd3を比較的新しくしていたにもかかわらず、これまでスケールとすべてを完全に把握してきました。私が持っている問題は、私が定義したいくつかのセットでtopojsonファイルからデータをマージまたはフィルタリングしようとしていることです。私は投影に使われた関数を除外します。ここでは、私がこれまで持っているものです。D3.js Topojsonのデータを定義クラスにマージする方法

var svg = d3.select("#map svg"); 
var regions = [ 
    { 
     region: 'low', 
     set: d3.set([ "USA", "CAN" ]) 
    }, 
    { 
     region: 'med', 
     set: d3.set([ "AUS" ]) 
    }, 
    { 
     region: 'high', 
     set: d3.set([ "RUS" ]) 
    } 
]; 
d3.json("site/js/topo.json", function(error, topology) { 
    // INDIVIDUAL COUNTRIES 
    svg.selectAll("path") 
     .data(topojson.feature(topology, topology.objects.worldByIso).features) 
     .enter() 
     .append("path") 
     .attr("data-iso", function(d){ 
      return d.properties.iso; 
     }) 
     .attr("d", path); 
}); 

私は、データ属性にtopojsonファイルからd.properties.iso値を返すことができるんだけど、私が本当にしたいことは、そのISOプロパティをチェックしています'regions'配列に対して、代わりにその領域(low、med、またはhigh)を返します。

理想的には、「領域」をループする必要がなくなり、迅速に処理できるようにチェックすることが理想的です。うまくいけば、これはすべて意味がある、私は残業からドアを使い果たすようにこれを書いている!

答えて

0

Array.reduce

私はあなたがArray.reduce()をしたいと思います。これにより、配列を単一の値に折りたたむことができます。私はあなたのd3.setsを単純な配列に変更したので、メソッドを使うことができましたが、d3のドキュメントでは、そのセットにhas()があるように見えます。

var regions = [{ 
 
    region: 'low', 
 
    set: ["USA", "CAN"] 
 
    }, 
 
    { 
 
    region: 'med', 
 
    set: ["AUS"] 
 
    }, 
 
    { 
 
    region: 'high', 
 
    set: ["RUS"] 
 
    } 
 
]; 
 

 
let getRegion = r => regions.reduce((a, c) => c.set.includes(r) ? c.region : a, null); 
 

 
console.log(getRegion('AUS')); 
 
console.log(getRegion('USA')); 
 
console.log(getRegion('EUR'));

関連する問題