Я пытаюсь создать карту, используя d3.js и три файла данных:
- простой файл .topojson с моей базовой картой
- файл .geojson с многоугольными областями
- файл .csv с данными (который имеет общее поле с .geojson)
Сначала я создал свою базовую карту с помощью этого кода:
var width = 360,
height = 600,
width2 = 479;
var proj = d3.geo.mercator()
.center([7.76, 48.57])
.scale(130000)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(proj);
var svg = d3.select("#carte").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("strasbourg.json", function(error, base) {
svg.append("path")
.data(topojson.feature(base, base.objects.contour).features)
.attr("class", "fond-stras")
.attr("d", path);
Результат был хорошим (http://raphi.m0le.net/data/BAS/App_d3_strasrk/etape%201.html), поэтому я усложнил свой код:
var width = 360,
height = 600,
width2 = 479;
var proj = d3.geo.mercator()
.center([7.76, 48.57])
.scale(130000)
.translate([width / 2, height / 2]);
// This array will be used to the next choropleth
var couleurs = ['rgb(165,15,21)','rgb(222,45,38)','rgb(251,106,74)',
'rgb(252,146,114)','rgb(252,187,161)','rgb(254,229,217)'];
var path = d3.geo.path()
.projection(proj);
var svg = d3.select("#carte").append("svg")
.attr("width", width)
.attr("height", height);
// I use queue.v1.min.js to load my .topojson, .geojson and .csv
queue()
.defer(d3.json,"strasbourg.json")
.defer(d3.json, "chute_ries.json")
.defer(d3.csv, "progression_riesk.csv")
.await(ready);
function ready(error,base,areas,results) {
// I declare my base map like before, it works always fine
svg.append("path")
.data(topojson.feature(base, base.objects.contour).features)
.attr("class", "fond-stras")
.attr("d", path);
// the problematic part begins here :
svg.append("g").attr("class","areas")
.selectAll("path")
.data(areas.features)
.enter()
.append("path")
.attr("class", "area")
.attr("d", path)
// I write this to test an automatic colouring
.attr("fill", function(d,i){
if (results[i].diff_ries<-23){
return couleurs[0]
}
else {return couleurs[4]
}
})
К сожалению, это не работает, как вы увидите здесь: http://raphi.m0le.net/data/BAS/App_d3_strasrk/etape%202.html
Несмотря на мои усилия, я не смог заставить это работать. Мой .geojson был создан с помощью QGis, поэтому я предполагаю, что он соблюдает правило правой руки.
Моя консоль не отображает никаких ошибок, поэтому я не смог определить, что не так. Я подозреваю, что это могло быть объявление data()
, но я видел несколько примеров, когда это было написано так с данными .geojson и работало отлично.