D3で既存のマップに新しいパスを追加

Question

D3を使用してワールドマップを作成しました。私はそれを作成するためにD3ライブラリとtopojsonライブラリを使用しています。

"ケニア"に "Turkana"という名前の郡の道を描きたいと思います。そのために、 "Turkana"郡のgeoJSONデータからWorldMapの既存の経路に新しい経路を追加しています。 以下のように

g.selectAll("path") 
    .data(countries) 
    .enter().append("path") 
    .attr("d", path) 
    .attr("class", "feature") 
    .on("click", clicked); 

g.selectAll("path") 
    .data(geoJSONKenyaTurkana.features) 
    .enter().append("path") 
    .attr("d",path) 
    .attr("class", "feature"); 

何も起こっていないようです。トルカナ郡の道は描かれていない。どんな助けもありがとう。

私は現在の作業コード用にplunkerを作成しました。

Answer 1

問題は、入力メソッドを正しく使用していないことです。まだパスが存在しないので、これは空の選択で、

g.selectAll("path")

：あなたは国を追加すると、選択を使用しています。一般に、選択範囲にデータを割り当て、enter()の選択を使用すると、入力選択には作成する必要があるすべての機能が保持されます。この場合、最初の選択には機能がありません。したがって、.enter().append()を使用すると、データ配列内の各アイテムに対して1つのフィーチャが作成されます。これは、追加された国を初めて初めて素晴らしいことになります。

2回目は同じ選択（郡を追加しようとしているとき）を選択していますが、その選択は空ではありません。作成したすべてのパス（国ごとに1つ）を選択しています。入力選択は空白になり、新機能を作成する必要はなく、作成された最初のパスのデータを更新するだけです。

あなたのコード内の2行をコメントする場合、これは目に見えるものです。このexample using your mapに示さ

が

g.selectAll("path") 
    .data(geoJSONKenyaTurkana.features) 
    //.enter().append("path") 
    .attr("d",path) 
    //.attr("class", "feature"); 

、あなたは郡のデータは、ちょうどカナダデータムを置き換えることがわかります（あなたが新しいデータを見ることができませんケニヤの前にケニアの前に追加されて以来、ケニアの後ろにあるので、カナダ（現トルコ語）のために）。

null選択を使用する必要がある場合は、d3.selectAll(null)またはd3.selectAll(".ClassDoesNotExistYet")（後者のオプションはやや遅くなります）などを使用できます。選択が空の場合、追加する必要があるデータ配列内のすべての項目入力選択になります。このplunkerのコードを意図したとおりに表示します（メッシュを削除して、このデモの郡の可視性を減らしました）。