通过d3 v5承诺加载时如何引用第二个数据集中的数据?

时间:2019-07-19 23:58:33

标签: javascript d3.js

我正在使用D3.js v5加载两个json文件。一个文件是地理json文件(邮政编码级别的美国地图),另一个文件是数据json文件(有关每个邮政编码的数据和信息)。通过数十个示例,我已经能够查看地图。但是我只是不了解有关promise的语法以及如何从两个不同的文件中获取数据。似乎将其合并为一个数据集,对此我感到非常困惑。

我尝试以us [0]和us [1]的方式访问它(例如在本示例http://learnjsdata.com/read_data.html中),但是它显示了第一个数据集的前两行,而不是访问第一个和第二个第二个数据集。

    var loadJSON = d3.json("/json/zips_us_topo.json");
    var dataJSON = d3.json("/json/CustomersByZip.json",
        function(d){
            zipcodeData.set(d.Zipcode, d.TotalPatients,d.ColorHex);
        });

    //Promise
    Promise.all([loadJSON, dataJSON]).then(addZips).catch(console.log.bind(console));

    function addZips([us]) {

        var myJSON = JSON.stringify(us);
        console.log(myJSON.substring(0,200)); // Returns first 200 characters of loadJSON file, so I know I can just reference it with "us".

        console.log(dataJSON); // displays "Promise {<resolved>: {...}}
        console.log(loadJSON); // displays "Promise {<resolved>: Array(28355)}" so it loaded the dataJSON data but how do I reference it?

        console.log(us[0]); // displays "undefined"
        console.log(us[1]); // displays "undefined"

        console.log(us[0][0]); // TypeError: Cannot read property '0' of undefined
        console.log(us[1][0]); //TypeError: Cannot read property '0' of undefined

        }

我的目标是访问dataJSON文件中的数据,并通过该邮政编码的ColorHex列设置特定邮政编码的填充。如何从dataJSON文件引用数据数组?

1 个答案:

答案 0 :(得分:2)

解决方案非常简单:删除us周围的方括号。应该只是:

function addZips(us) {

说明

像现在一样使用这些方括号...

function addZips([us]) {

...处理参数时,您实际上是destructuring,只获取第一个传递的数组。看这个演示:

const a = [[42], [17]];

foo(a);
bar(a);

function foo(x) {
  console.log("Without brackets: " + x);
}

function bar([x]) {
  console.log("With brackets: " + x)
}