Question

我正在尝试学习使用d3js datamaps而我正在努力使用动态数据。

网站中的每个示例都使用一些静态数据，编写为javascript对象，但我需要它是动态的。

我从一个JSON文件开始，我在其中获得了一些数据，我正在解析它们以创建一个遵循 datamaps data格式的新JSON。

输出JSON就像这样：

{
ARG: {
    plays: 15768,
    fillKey: "LOW"
},
AUT: {
    plays: 31061,
    fillKey: "LOW"
},
AUS: {
    plays: 169478,
    fillKey: "LOW"
},
BEL: {
    plays: 65295,
    fillKey: "LOW"
},
BRA: {
    plays: 12602,
    fillKey: "LOW"
},
GBR: {
    plays: 731583,
    fillKey: "LOW"
},
ITA: {
    plays: 131569,
    fillKey: "LOW"
},
USA: {
    plays: 272685,
    fillKey: "LOW"
}
}

如果我执行

map.updateChoropleth({ARG: {plays: 15768,fillKey: "LOW"},AUT: {plays: 31061,fillKey: "LOW"},AUS: {plays: 169478,fillKey: "LOW"},BEL: {plays: 65295,fillKey: "LOW"},BRA: {plays: 12602,fillKey: "LOW"},GBR: {plays: 731583,fillKey: "LOW"},ITA: {plays: 131569,fillKey: "LOW"},USA: {plays: 272685,fillKey: "LOW"}})

或者如果我使用

实例化地图

data: {ARG: {plays: 15768,fillKey: "LOW"},AUT: {plays: 31061,fillKey: "LOW"},AUS: {plays: 169478,fillKey: "LOW"},BEL: {plays: 65295,fillKey: "LOW"},BRA: {plays: 12602,fillKey: "LOW"},GBR: {plays: 731583,fillKey: "LOW"},ITA: {plays: 131569,fillKey: "LOW"},USA: {plays: 272685,fillKey: "LOW"}}

一切顺利，但这意味着使用静态硬编码数据，这不是我需要的。

到目前为止，我已尝试过一些路线，但没有成功。

像这样编写地图对象的data属性

data: function() { return parseJSON("json/world-top/latest.json")}

没有任何结果，同样适用于

data: parseJSON("json/world-top/latest.json")

和

var jsonString = parseJSON("json/world-top/latest.json");
map.updateChoropleth(jsonString);

我哪里错了？

编辑：

我正在使用的parseJSON函数是我编写的一个函数来改变我的JSON数据

{
    "tracks": [{
        "date": "2014-05-11",
        "country": "ARG",
        "track_url": "https:\/\/play.spotify.com\/track\/3cHyrEgdyYRjgJKSOiOtcS",
        "track_name": "Timber",
        "artist_name": "Pitbull",
        "artist_url": "https:\/\/play.spotify.com\/artist\/0TnOYISbd1XYRBk9myaseg",
        "album_name": "Global Warming: Meltdown (Deluxe Version)",
        "album_url": "https:\/\/play.spotify.com\/album\/2F7tejLHzTqFq2XLol9ZGy",
        "artwork_url": "http:\/\/o.scdn.co\/300\/d096684f9d3fa3525421f2c4204f4e8e2cbba471",
        "num_streams": 50382
    },
    {
        "date": "2014-05-11",
        "country": "AUT",
        "track_url": "https:\/\/play.spotify.com\/track\/7b71WsDLb8gG0cSyDTFAEW",
        "track_name": "Summer",
        "artist_name": "Calvin Harris",
        "artist_url": "https:\/\/play.spotify.com\/artist\/7CajNmpbOovFoOoasH2HaY",
        "album_name": "Summer",
        "album_url": "https:\/\/play.spotify.com\/album\/0IGsZsrvIe5AQKvMmVobYq",
        "artwork_url": "http:\/\/o.scdn.co\/300\/ca67ba1425e4308104ecae9fc493f3ef96ceb72a",
        "num_streams": 32885
    },
    {
        "date": "2014-05-11",
        "country": "AUS",
        "track_url": "https:\/\/play.spotify.com\/track\/3oxO64VclwEDBoJWkeneBW",
        "track_name": "Fancy",
        "artist_name": "Iggy Azalea",
        "artist_url": "https:\/\/play.spotify.com\/artist\/5yG7ZAZafVaAlMTeBybKAL",
        "album_name": "Fancy",
        "album_url": "https:\/\/play.spotify.com\/album\/5oX3sr8ft9IwnI090Xf35t",
        "artwork_url": "http:\/\/o.scdn.co\/300\/d71d05ded1704bcf849465dd5e76e196847d1c0a",
        "num_streams": 201763
    },
    {
        "date": "2014-05-11",
        "country": "BEL",
        "track_url": "https:\/\/play.spotify.com\/track\/3s4U7OHV7gnj42VV72eSZ6",
        "track_name": "Rather Be feat. Jess Glynne",
        "artist_name": "Clean Bandit",
        "artist_url": "https:\/\/play.spotify.com\/artist\/6MDME20pz9RveH9rEXvrOM",
        "album_name": "Rather Be feat. Jess Glynne",
        "album_url": "https:\/\/play.spotify.com\/album\/4UB0J5V3JsZZtNR360pZ6r",
        "artwork_url": "http:\/\/o.scdn.co\/300\/a1babd2524962d4703a6c1aa9dfddcc2018713fd",
        "num_streams": 110491
    },
    {
        "date": "2014-05-11",
        "country": "BRA",
        "track_url": "https:\/\/play.spotify.com\/track\/3s4U7OHV7gnj42VV72eSZ6",
        "track_name": "Rather Be feat. Jess Glynne",
        "artist_name": "Clean Bandit",
        "artist_url": "https:\/\/play.spotify.com\/artist\/6MDME20pz9RveH9rEXvrOM",
        "album_name": "Rather Be feat. Jess Glynne",
        "album_url": "https:\/\/play.spotify.com\/album\/4UB0J5V3JsZZtNR360pZ6r",
        "artwork_url": "http:\/\/o.scdn.co\/300\/a1babd2524962d4703a6c1aa9dfddcc2018713fd",
        "num_streams": 17953
    },
    {
        "date": "2014-05-11",
        "country": "GBR",
        "track_url": "https:\/\/play.spotify.com\/track\/5Sf3GyLEAzJXxZ5mbCPXTu",
        "track_name": "Waves - Robin Schulz Radio Edit",
        "artist_name": "Mr. Probz",
        "artist_url": "https:\/\/play.spotify.com\/artist\/33W1pnW9zScZtYTnAoWnOT",
        "album_name": "Waves",
        "album_url": "https:\/\/play.spotify.com\/album\/7l4LGPXk2mB80WgXy4VeuB",
        "artwork_url": "http:\/\/o.scdn.co\/300\/ccfb05bea829a2dc0c736f591a22eac50c18aa56",
        "num_streams": 1401994
    },
    {
        "date": "2014-05-11",
        "country": "ITA",
        "track_url": "https:\/\/play.spotify.com\/track\/3s4U7OHV7gnj42VV72eSZ6",
        "track_name": "Rather Be feat. Jess Glynne",
        "artist_name": "Clean Bandit",
        "artist_url": "https:\/\/play.spotify.com\/artist\/6MDME20pz9RveH9rEXvrOM",
        "album_name": "Rather Be feat. Jess Glynne",
        "album_url": "https:\/\/play.spotify.com\/album\/4UB0J5V3JsZZtNR360pZ6r",
        "artwork_url": "http:\/\/o.scdn.co\/300\/a1babd2524962d4703a6c1aa9dfddcc2018713fd",
        "num_streams": 228436
    },
    {
        "date": "2014-05-11",
        "country": "USA",
        "track_url": "https:\/\/play.spotify.com\/track\/3oqCnpAoHf3SDFynxx7AU4",
        "track_name": "Fancy",
        "artist_name": "Iggy Azalea",
        "artist_url": "https:\/\/play.spotify.com\/artist\/5yG7ZAZafVaAlMTeBybKAL",
        "album_name": "Fancy",
        "album_url": "https:\/\/play.spotify.com\/album\/20a4p8pXFFG3ZungWSbYv3",
        "artwork_url": "http:\/\/o.scdn.co\/300\/62d2b5169d34280636d6f2f93f0215f50621c75e",
        "num_streams": 2877914
    }
    ],
    "prevDate": "2014-05-04"
}

我之前写的输出JSON。

这是parseJSON函数：

parseJSON = function(jsonFile){
    var tracks = {};
    var json = $.ajax({
        url: jsonFile,
        dataType: 'json',
        data: "",
        success: function(data){tracks = data.tracks;},
        async: false
    });
    console.log(tracks);
    var outputString = "{";
    for(var i = 0; i<tracks.length; i++){
        var numberOfPlays = Math.round(tracks[i].num_streams*Math.random(1000));
        var fillColor = (numberOfPlays > 5000000)? "HIGH" : (numberOfPlays < 5000000 && numberOfPlays > 1000000) ? "MEDIUM" : "LOW";
        outputString+=tracks[i].country + ":{ plays:" + numberOfPlays + ", fillKey: \"" + fillColor + "\"}";
        if (i != tracks.length-1) outputString+=",";
    }
    outputString+="}";
    console.log(outputString);
    return outputString;
}

我需要这样做，因为 datamaps 希望数据格式化为

{
    COUNTRY-CODE: {
        property1: value,
        property2: value
    }
    ...
}

这就是使用

的原因

d3.json("json/world-top/latest.json", function(error, latest_data) {
    if (error) {
        // Display a helpful message to the user
        console.log(error);
    } else {
        console.log("updating");
        map.updateChoropleth(latest_data);
    }
});

正如@James Trimble所建议的那样。

Answer 1

据我所知，除非您使用jQuery，否则parseJSON不可用，在这种情况下您将使用$.parseJSON。（现代浏览器中的JavaScript确实有内置的JSON.parse方法。）

更大的问题是您的代码正在尝试解析文件名而不是JSON文件的内容。使用d3.json通过AJAX加载数据可以轻松解决这个问题。这是an example that uses this method。您需要的代码如下：

d3.json("json/world-top/latest.json", function(error, latest_data) {
    if (error) {
        // Display a helpful message to the user
    } else {
        map.updateChoropleth(latest_data);
    }
});

要记住的一点是，d3.json语句后面的代码将在加载数据时继续运行。因此，您需要将所有更新代码放在回调函数中。

使用动态数据更新d3js Datamap

1 个答案: