D3 Choroplethにフィルタとメッシュを適用する方法

Question

私はBostock's Quantile Choroplethのバリエーションで作業しています。

私は投影法を正しくスケーリングし、自分のデータを統合しました。私は現在、状態IDが48から始まる郡IDだけを含むようにjson郡データをフィルタリングしています。

しかし、私はまだ完全に機能しますが、辺境の郡の間で弧を結合するにはまだ.mesh関数を適用する必要があります。さもなければ、私がホバリングの影響を加えると、私は変な不均一なボーダーを得るでしょう。

データコールをデータム（メッシュ）呼び出しで置き換えようとしましたが（コメントアウトされた行のを参照）、動作しませんでした。ここで

は私の作業コードです：

function ready(error, us) { 
    if (error) throw error; 

    //define the feature of the states from the topojson file, then filter so only state 48 (texas) shows 
    var states = topojson.feature(us, us.objects.states), 
    state = states.features.filter(function(d) { return d.id === 48; })[0]; 

    //define the features for the counties and filter based on number (starting with 48) 
    var counties = topojson.feature(us, us.objects.counties), 
    mycounties = counties.features.filter(function(d) { if(d.id >= 48000 && d.id <=49000) return d.id; }); 

    //initiate the class for the state, and add an outline path 
    svg.append("path") 
     .datum(state) 
     .attr("class", "outline") 
     .attr("d", path); 

    //initiate the g object for the counties 
    svg.append("g") 
     .attr("class", "counties") 
    .selectAll("path") 
    //.datum(topojson.mesh(us, us.objects.counties, function(a, b) { return a !== b; })) 
    // ^I tried adding this to replace the following line, but it does not work 
    .data(mycounties) 
    .enter().append("path") 
     .attr("fill", function(d) { return color(d.establishments = centralTexas.get(d.id)); }) 
     .attr("d", path) 
    .append("title") 
     .text(function(d) { var obj2 = jsonCounties[d.id]; if (typeof obj2 != "undefined") {return obj2.countyName + ": " + d.establishments + " Active Establishments";} }); 

} 

は、どのように私はこれについて行くべきか？それは.mesh関数内で、より複雑なフィルタのクエリを実行し、完全に私の

VAR郡は= topojson.feature（私たち、us.objects.counties）、mycounties = counties.featuresの必要性を排除することができます.filter（function（d）{if（d.id> = 48000 & & d.id < = 49000）return d.id;}）;

コード？

または、その変数で別の構文でメッシュ関数を実行する必要がありますか？メッシュは「のためのメッシュを表すにGeoJSON MultiLineStringのジオメトリオブジェクトを返します - エリアを追加しませんdatum.append（メッシュ）を使用して

：

Answer 1

私はあなたの究極の目標は、ホバー機能のさえ境界を取得することです理解と仮定すると、指定されたトポロジ内の指定されたオブジェクト。 API documentation。また、.append().datum()を使用すると1つのフィーチャが追加されます。個々の郡のホバー効果は失われます。フィーチャにバインドされたデータはなく、1つのフィーチャにバインドされたデータムは1つのみです。最後に、メッシュは奇数の塗りつぶしパターンも持つことができます（questionを参照）。しかし、メッシュは、意図したとおりに表示されているホバー上の枠線を修正する必要はありません。

topojsonは同じアークを削除しますが、すべての共有アークはgeojsonで少なくとも2回表現されますが、それらが同一であるため、互いの上に直接オーバーレイされます。レイヤーは、フィーチャーをインポートする順序を基準にしています。

境界がホバー上で拡張されている場合、フィーチャがどのようにレイヤ化されているかによって、隣接するフィーチャの一部（またはすべてまたはなし）になる可能性があります。これにより、本質的にフィーチャのアウトラインをクリッピングすることにより、奇妙なアウトラインパターンが作成これは、フィーチャ/エレメントのレイヤーに応じて、郡/フィーチャの一部の変更のみが表示されることを意味します。それらがあたかも

d3.select(this).raise()（new in v4）とホバー機能を変更してみてくださいまたは node.parentNode.appendChild(node);（ノードがDOM要素ではなく、D3選択でV3を、）を使用し、これらは、（SVGの先頭に機能を移動します最後に追加されました） - これは、他の機能によって部分的に覆われていないエッジスタイリング機能を表示することを可能にします。

このexampleはあなたの参照ブロックを使用してください（私はホバー郡を上げることは、あまりにも状態の境界上にエッジを上げるように、状態が同じ親ノードに概説配置した。マウスに出て、私は状態となるような特徴を下げます