Coloring DC.JS Choropleth Charts

Попытка раскрасить хороплетную диаграмму DC.JS. ColorAccessor по умолчанию не работает, и я затрудняюсь заставить все работать. Любая помощь будет огромной. Я чувствую, что некоторая пользовательская функция уменьшения необходима, но я не слишком уверен, как или где.

http://codepen.io/MichaelArledge/pen/vLKZzE?editors=001

      chart.width(c_w)
                .height(c_h)
                .dimension(zip_code_dim)
                .group(zip_totals)
                .projection(projection)
                .colorAccessor(function(d){ console.log(d);  return d.value;  })
                .overlayGeoJson(statesJson.features ,"zip_area");

1 ответ

Решение

Вы не определяете функцию overlayGeoJson, откуда взять значение

Вы определили так:

overlayGeoJson(statesJson.features ,"zip_area");

Должно было

 .overlayGeoJson(statesJson.features ,"zip_area", 
function(d){ return d.properties.zip})

Теперь b'coz вышеупомянутая функция возвращает почтовые индексы так d.value будет undefined

.colorAccessor(function(d){ return d.value;  })

Так должно быть

 .colorAccessor(function (d) { return colors(d); });

Я определил линейную шкалу для цветов, ее значение должно быть возвращено из функции colorAccessor.

  var colors = d3.scale.linear().range(["#E2F2FF", "#C4E4FF", "#9ED2FF", "#81C5FF", "#6BBAFF", "#51AEFF", "#36A2FF", "#1E96FF", "#0089FF", "#0061B5"]);

Полный рабочий код здесь

Надеюсь это поможет!

Другие вопросы по тегам