d3: цвет по отдельному массиву

Question

У меня есть карта состояний, идентифицированных по кодам fips и сопоставленная с topoJSON.

У меня есть массив ФИПС кодов и население data = [{fips: 1, pop: 2000}, {fips:2, pop: 3240}, etc.]

Я пытаюсь раскрасить состояния населения на коде ниже. Любые мысли о том, почему он не работает?

g.append("g") 
    .attr("id", "states") 
.selectAll("path") 
    .data(state_features) 
.enter().append("path") 
.attr("d", path) 
.attr("class", "state") 
.style("fill", function(d) { 
    state = data.filter(function(obj) { return obj.fips == d.id; })[0]; 
    return color(state.pop); }) 
.on("mouseover", tip.show) 

svg.call(tip) 

Похожая идея работает для моего toolip:

var tip = d3.tip() 
    .html(functioN(d, i) { 
     state = data.filter(function(ob) { return obj.fips == d.id;})[0] 
     return state.pop;}) 

Answer 1

Я считаю, что вы очень близки. Если вы используете обычный GeoJSON и определили данные как data(state_features), возможно, ключи fips находятся внутри коллекции под названием properties. Если это так, то вам нужно только добавить properties перед тем fips, как это:

.style("fill", function(d) { 
    var state = data.filter(function(obj) { return obj.properties.fips == d.id; })[0]; 
return color(state.pop); }) 

Это было бы объяснить, почему ваш states являются undefined.

Кроме того, это хорошая идея проверить, прежде чем заполнять пути, если у вас есть все состояния в вашем var data, иначе он снова вернется не определен. Вы можете сделать это:

if (typeof state != 'undefined'){ 
    return color(state.pop); 
} else { 
    return someColorHere; 
} 

Answer 2

Для path, вы должны использовать функцию attr и stroke свойство:

g.append("g") 
    .attr("id", "states") 
.selectAll("path") 
    .data(state_features) 
.enter().append("path") 
.attr("d", path) 
.attr("class", "state") 
.attr('stroke', function(d) { 
    var state = data.filter(function(obj) { return obj.fips == d.id; })[0]; 
    return color(state.pop); }) 
.attr('stroke-width', 2) 
.attr("fill", "none") 
.on("mouseover", tip.show);