d3でリーフレットにjsonを更新

Question

私はleafletを使用しており、jsonとd3 (vers3)を表示しています。 基本的に私はこのチュートリアルhereに従っています。

これは私のコードです。最初のcallbackHandlerは、Webサイトとのユーザーの対話に基づいて、別の言語がJavaScriptに送信する情報を受け取る方法を記述しています。 pathToFileは、d3.json(...)によってロードされるファイル（json）へのリンクです。

var svg = d3.select(map.getPanes().overlayPane).append("svg"), 
g = svg.append("g").attr("class", "leaflet-zoom-hide"); 

someMethod("myName", function(pathToFile) { 
    console.log(pathToFile); 
    d3.json(pathToFile, function(error, collection) { 
    console.log(collection); 
     if (error) throw error; 

     // Use Leaflet to implement a D3 geometric transformation. 
     function projectPoint(x, y) { 
      var point = map.latLngToLayerPoint(new L.LatLng(y, x)); 
      this.stream.point(point.x, point.y); 
     } 

     var transform = d3.geo.transform({point: projectPoint}), 
     path = d3.geo.path().projection(transform); 


     var feature = g1.selectAll("path") 
     .data(collection.features) 
     .enter().append("path") 
     .attr("stroke-width", 0.5) 
     .attr("fill-opacity", 0.7) 
     .attr("stroke", "white") 

     map.on("viewreset", reset); 
     reset(); 

     // Reposition the SVG to cover the features. 
     function reset() { 
      var bounds = path.bounds(collection), 
      topLeft = bounds[0], 
      bottomRight = bounds[1]; 

      svg1 .attr("width", bottomRight[0] - topLeft[0]) 
      .attr("height", bottomRight[1] - topLeft[1]) 
      .style("left", topLeft[0] + "px") 
      .style("top", topLeft[1] + "px"); 

      g.attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")"); 

      feature.attr("d", path); 
     } 
     console.log("1"); 
     }); 
console.log("2"); 
}); 

面白い部分は次のとおりです。初めてコードを実行したときに正常に動作します。私のjsonが地図上に表示されます。ただし、最初のcallbackHandler（someMethod）が2回目に実行されると（一部のユーザーがWebサイトとやりとりすると）、jsonはチラシに表示されません。

は、私はマップを更新しようとした後に含まconsole.logの出力厥：

// on startup of website, the callbackHandler "someMethod" gets 
./some/path/toFile 
Object {crs: Object, type: "FeatureCollection", features: Array[20]} 
2 
1 

// after interaction with the website and execution of the callbackHandler "someMethod" 
./some/other/path/toFile 
Object {crs: Object, type: "FeatureCollection", features: Array[9]} 
2 
1 

をしかし、新しいjsonは表示されません。代わりに古いものはそのままです。 なぜですか？

Answer 1

私は周りを遊ぶコードがありません。あなたが最初の呼び出しsomeMethodファイルがアップロードされます

、すべてが正常に動作します：

私の勘です。

var feature = g1.selectAll("path") 
     .data(collection.features) 
     .enter().append("path") 
     .attr("stroke-width", 0.5) 
     .attr("fill-opacity", 0.7) 
     .attr("stroke", "white") 

理由：

初めてg1.selectAll("path")実行されます。選択は空であり、collection.featuresのデータに従ってパスを追加します。これは動作します。

二時間、あなたがg1.selectAll("path")を行うときに、それはあなたがデータをバインドするパスを返しますがない作業を追加します。

古いcollection.featuresを削除するか、更新する必要があるという問題があります。オプション2

オプション1

var paths = g1.selectAll("path").data() 

paths.exit().remove();//remove old data paths 

var feature = paths 
     .enter().append("path") 
     .attr("stroke-width", 0.5) 
     .attr("fill-opacity", 0.7) 
     .attr("stroke", "white") 

これを行うには

が、これはあなたの問題を修正するすべてのパス

var paths = g1.selectAll("path").data() 

g1.selectAll("path").remove();//remove all paths 

var feature = paths 
     .enter().append("path") 
     .attr("stroke-width", 0.5) 
     .attr("fill-opacity", 0.7) 
     .attr("stroke", "white") 

希望を取り除きます！

読む更新/特にリンクのため、終了/ here