D3.js d3和x2B；传单数据绑定中断重采样_D3.js

D3.js d3和x2B；传单数据绑定中断重采样

d3.js

D3.js d3和x2B；传单数据绑定中断重采样,d3.js,D3.js,所以我遇到了一个奇怪的问题，我一辈子都想不出来。我想我知道发生了什么，但我可能错了通常在使用d3构建chloreopath地图时，我会加载geojson并构建路径。然后，我调用第二个函数将外部数据附加到路径上，并相应地为它们着色这适用于规则形状（州、国家）然而，对于非正规州（国会选区），加载一个基本地图来定位用户是理想的所以我一直在玩博斯托克的代码如下： var map = new L.Map("map", {center: [40.037875, -76.305514], zoom:

所以我遇到了一个奇怪的问题，我一辈子都想不出来。我想我知道发生了什么，但我可能错了

通常在使用d3构建chloreopath地图时，我会加载geojson并构建路径。然后，我调用第二个函数将外部数据附加到路径上，并相应地为它们着色

这适用于规则形状（州、国家）

然而，对于非正规州（国会选区），加载一个基本地图来定位用户是理想的

所以我一直在玩博斯托克的

代码如下：

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);

};  
});

我的问题出现在我调用重置功能，然后调用颜色功能时。数据绑定似乎正在中断或中断路径重新绘制

只要不调用数据绑定，复位功能就可以正常工作。颜色功能在初始加载时也可以正常工作。当两者混合时，事情似乎就破裂了

我还宿醉，这可能是问题的原因。

问题是您在不同的时间将不同的数据集绑定到路径上

此处完成的第一次绑定：

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

此处完成第二次绑定（设置颜色属性）

因此，当您缩小视图时，路径属性将丢失，因为路径不再绑定特征数据

您应该这样做（加载用于着色和设置不透明度的第二组json数据时）：

现在，填充/不透明度重置样式属性将如下所示：

  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)
  });

工作代码

问题是您在不同的时间将不同的数据集绑定到路径