如何在D3中将.csv数据连接到TopoJSON

时间:2019-04-15 15:53:44

标签: javascript csv d3.js topojson

我正在使用D3制作一个Choropleth贴图,并且想要使用csv中的数据来填充贴图。

我使用以下代码来定义和连接数据。当我进行console.log记录时,我只是得到一个空的多边形,看到一个空白的地图,而不是根据值着色的地图(执行此功能的代码在代码的其他地方)。

    var promises = [];
    promises.push(d3.csv("data/nyplData.csv"));
    promises.push(d3.json("data/nycNTA.topojson"));
    promises.push(d3.json("data/manhattan.topojson"));
    Promise.all(promises).then(callback);



    function callback(data){

        //console.log(data);
        csvData = data[0];
        nyc = data[1];
        manhattan = data[2];

        //place graticule on the map
        setGraticule(map, path);

        //translate New York/Manhattan into TopoJSONs
        var nycNeighborhoods = topojson.feature(nyc, nyc.objects["nyc-neighborhoods"]),
            manhattanNeighborhoods = topojson.feature(manhattan, manhattan.objects.manhattan).features;

        //add Europe countries to map
        var nyc = map.append("path")
            .datum(nycNeighborhoods)
            .attr("class", "nyc")
            .attr("d", path);

        //join csv data to GeoJSON enumeration units
        manhattan = joinData(manhattan, csvData);
        //console.log(manhattan);

        //create the color scale
        var colorScale = makeColorScale(csvData);

        //add enumeration units to the map
        setEnumerationUnits(manhattanNeighborhoods, map, path, colorScale);

        //add coordinated visualization to the map
        setChart(csvData, colorScale);

        //create dropdown for attribute selection
        createDropdown(csvData);
    };
}; //end of setMap()

。 。

function joinData(manhattan, csvData){
    //loop through csv to assign each set of csv attribute values to geojson region
    for (var i=0; i < csvData.length; i++){

        var csvRegion = csvData[i]; //the current region

        var csvKey = csvRegion.ntacode; //the CSV primary key

        //loop through geojson regions to find correct region
        for (var a=0; a < manhattan.length; a++){
            //console.log(manhattan.length);
            var geojsonProps = manhattan[a].properties; //the current region geojson properties
            var geojsonKey = geojsonProps.ntacode; //the geojson primary key

            //where primary keys match, transfer csv data to geojson properties object
            if (geojsonKey == csvKey){

                //assign all attributes and values
                attrArray.forEach(function(attr){
                    var val = parseFloat(csvRegion[attr]); //get csv attribute value
                    geojsonProps[attr] = val; //assign attribute and value to geojson properties
                });
            };
        };
    };

    return manhattan;
};

我期望该函数将基于字段通用字段的csv中的数据连接到地图上的topoJSON文件为“ ntacode”,但同样,我也得到了一个填充有空值的地图。谁能看到我要去哪里错了?

0 个答案:

没有答案