d3 +小冊子數據綁定中斷重採樣

Question

所以我遇到了一個奇怪的問題，我不能爲我的生活弄清楚。我想我知道發生了什麼，但我可能是錯的。

通常，當使用d3構建一個chloreopath地圖時，我會加載我的geojson並構建路徑。然後我調用第二個函數將外部數據附加到路徑並相應地着色它們。

適用於常規形狀（狀態，國家）。

但是，對於不規則的州（國會區），加載底圖以定位用戶是理想選擇。

所以我一直在玩博斯托克的d3 + leaflet example here。

下面的代碼：當我打電話復位功能，並隨後調用顏色函數出現

var map = new L.Map("map", {center: [40.037875, -76.305514], zoom: 8}) 
.addLayer(new L.TileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")); 

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

    d3.json("https://s3.amazonaws.com/WorkMalawskey/1test_map/state_house.json", function(json) { 


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

    var feature = g.selectAll("path") 
     .data(json.features) 
     .enter().append("path") 
     .attr('class', 'district'); 

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


function reset() { 

console.log('start reset'); 

var bounds = path.bounds(json), 
    topLeft = bounds[0], 
    bottomRight = bounds[1]; 

svg .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).attr('class', 'district'); 

console.log('end reset'); 

}; 

function color() { 

d3.csv("https://s3.amazonaws.com/WorkMalawskey/1test_map/house.csv", function(data) { 

console.log('dataloaded'); 


d3.selectAll('.district') 
.data(data) 
.enter(); 

console.log('dataloaded2'); 

var Color = d3.scale.ordinal() 
      .domain(['R', 'D']) 
      .range(["#de2d26", "#3182bd"]); 

var Color2 = d3.scale.ordinal() 
      .domain(['No', 'Yes']) 
      .range([0.5, 0.75]);  

d3.selectAll('.district').style('fill', function (d) { return Color(d.Party)}).style('opacity', function (d) { return Color2(d.Contested)}); 


}); 
}; 




function projectPoint(x, y) { 
var point = map.latLngToLayerPoint(new L.LatLng(y, x)); 
this.stream.point(point.x, point.y); 

}; 
}); 

我的問題。數據綁定似乎正在打破或中斷路徑重新繪製。

只要數據綁定沒有被調用，重置函數就可以正常工作。在初始加載時，顏色函數也可以正常工作。當兩者混合時，事情似乎破裂了。

我也是宿醉，這可能有助於解決這個問題。

Answer 1

問題是你在不同的時間綁定不同的數據集到路徑。

1號綁定在這裏完成：

var feature = g.selectAll("path") 
     .data(json.features)//all path will have feature bound to it. 
     .enter().append("path") 
     .attr('class', 'district'); 

2日在這裏綁定實現的（設置顏色屬性）

d3.selectAll('.district') 
.data(data) 
.enter(); 

所以，當你在我們走出路徑特性放大是因爲失去了路徑不再具有綁定到它的特徵數據。

你應該做這樣的（上裝載第二組JSON數據的着色和設置不透明度）：

d3.selectAll('.district')[0].forEach(function(d, i){ 
    //to the current data add a new property to store the color information. 
    d3.select(d).data()[0].colorProps = data[i];  
    }); 

現在個夠/不透明度重置樣式屬性將是這樣的：

d3.selectAll('.district').style('fill', function(d) { 
    //as this property is now stored in colorProps 
    return Color(d.colorProps.Party) 
    }).style('opacity', function(d) { 
    return Color2(d.colorProps.Contested) 
    }); 

工作代碼here