Question

我有一个choropletic地图，一些单选按钮允许你在A，B和C之间进行选择，还有一个滑块可以让你选择一年。

我想根据这些数据为地图着色：

ID,COUNTRY,YEAR,A,B,C
AL,Albania,2000,98,50,10
AL,Albania,2001,41,2,14
AL,Albania,2002,75,51,10
DE,Germany,2000,74,21,25
DE,Germany,2001,46,2,48
DE,Germany,2002,74,81,90
...

也就是说，例如，如果用户选择B和2000年，那么地图将使用数据着色：

COUNTRY,YEAR,A,B,C
Albania,2000,50
Germany,2000,21
...

这是我的一段代码：

var colors = d3.scaleLinear()
    .domain([90, 100])
    .range(["#131313", "#ba3c28"])

d3.queue()
    .defer(d3.json, "./nuts0.json") 
   .defer(d3.csv, "./data.csv") 
   .await(makeMap); 

function makeMap(error, europe, data) {
    if(error) {
        throw error;
    }
    var geojson = topojson.feature(europe, europe.objects.nuts0);

    // ??
   var dataNest = d3.nest()
    .key(function(d) {
        return d.YEAR;
    })
    .object(data);

    svg.selectAll("path")
        .data(geojson.features)
        .enter()
        .append("path")
        .attr("class", "country-path")
        .attr("id", function(d) {
            return "c" + d.id;
        })
        .attr("fill", function(d, i) {
            //return "tomato";
            return colorCountrie(d, i);
        })
        .attr("d", path)
        .on("mouseover", function(d) {
            d3.select(this)
                .style("stroke-width", 2)
                .attr("fill", "white");
            var countrySelected = d.properties.name;
        })
        .on("mouseout", function(d) {
            d3.select(this)
                .style("stroke-width", 1)
                .attr("fill", "tomato");
        });

} 

function colorCountrie(country, idx) {
    country = d3.selectAll(".country-path").data()[index];
    var returnColor;
    var col = getColor(country.id); 
    if(col == 0) { 
        returnColor = "steelblue"; 
    }
    else { 
        returnColor = colors(col);
    }
    return returnColor;
}

var getColor = function(id) {
    var selectedYear = ...;
    var selectedMeasure = ...;
    var complete = dataNest[selectedYear][selectedMeasure].slice();
    var selectedValue = complete.find(function(tupla) {
        return tupla.ID == id;
    });
    if(selectedValue == null) {
        return -1; 
    } 
    else {
        var value = selectedValue.selectedMeasure;
        return value;
    }
}

显然它不起作用，问题是我不知道如何嵌套数据。到目前为止，我使用的数据（在其他地图中）采用以下形式：

ID,COUNTRY,YEAR,MEASURE
AL,Albania,2000,A,98
AL,Albania,2000,B,50
AL,Albania,2000,C,10
AL,Albania,2001,A,41
AL,Albania,2001,B,2
AL,Albania,2001,C,14
AL,Albania,2002,75
AL,Albania,2002,B,51
AL,Albania,2002,C,10
...

巢是这样做的：

var dataNest = d3.nest()
    .key(function(d) {
        return d.YEAR;
    })
    .key(function(d) {
        return d.MEASURE;
    })
    .object(data);

现在数据的组织方式不同，我不知道如何管理巢以及可以为国家着色的方法。

显然，我希望每当用户更改年份或度量时都会更新地图。

欢迎每一位帮助，谢谢。

如何嵌套数据以使用等值区域地图显示它们？

0 个答案: