Javascript 如何从该数组中的值获取特定的JSON数组_Javascript_Json_D3.js

Javascript 如何从该数组中的值获取特定的JSON数组

javascript json d3.js

Javascript 如何从该数组中的值获取特定的JSON数组,javascript,json,d3.js,Javascript,Json,D3.js,我不熟悉d3.js和JSON。我通过做一些小的可视化来学习。现在，我尝试加载一个JSON数据，并根据国家代码可视化细节我的JSON数据如下所示： [ { "Id":"SWE", "Country":"Sweden", "Population":9592552 }, { "Id":"NOR", "Country":"Norway", "Population":5084190 }, . . . ] 我有世界国家地理JSON，我可以成

我不熟悉d3.js和JSON。我通过做一些小的可视化来学习。现在，我尝试加载一个JSON数据，并根据国家代码可视化细节

我的JSON数据如下所示：

[
  {
    "Id":"SWE",
    "Country":"Sweden",
    "Population":9592552
  },
  {
    "Id":"NOR",
    "Country":"Norway",
    "Population":5084190
  },
.
.
.
]

我有世界国家地理JSON，我可以成功地可视化，也可以突出显示所选国家并获得所选国家的id。现在我需要获得详细信息（根据我从选择中获得的id，该国家的人口和国家名称）。有人能告诉我如何从JSON数组中获取值吗

我试着

 population = data.map( function(d) { return d["Population"] });

但这个给了我整个种群作为一个数组。如何根据Id获取SWE的人口

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <style>
    </style>
    <script type="text/javascript">

        var data;

        function draw(geo_data) {
            "use strict";
            var margin = 75,
                    width = 1400 - margin,
                    height = 600 - margin;

            var svg = d3.select("body")
                    .append("svg")
                    .attr("width", width + margin)
                    .attr("height", height + margin)
                    .append('g')
                    .attr('class', 'map');

            var projection = d3.geo.mercator()
                    .scale(150)
                    .translate( [width / 2, height / 1.5]);

            var path = d3.geo.path().projection(projection);

            var map = svg.selectAll('path')
                    .data(geo_data.features)
                    .enter()
                    .append('path')
                    .attr('d', path)
                    .style('fill', 'lightBlue')
                    .style('stroke', 'black')
                    .attr("id", function(d) {
                        return d.id; })
                    .on("click", function(d, i) {

                        d3.select(".selected").classed("selected", false).style('fill', 'lightBlue');
                        d3.select(this).classed("selected", true).style('fill', 'red');
                        console.log(d.id)
                        display(d.id)

                    })
                    .style('stroke-width', 0.5);

        };

        d3.json("data/wrangledData_overallScore.json", function (error, json) {
            if (error) return console.warn(error);
            data = json;
            console.log("JSON", data);
        });

        function display(e){
           var population = data.map( function(d) { return d["Population"] });
            console.log(population)
        }

    </script>
</head>
<body>
<script type="text/javascript">
    /*
     Use D3 to load the GeoJSON file
     */

    d3.json("data/world-countries.json", draw);
</script>
</body>
</html>


var数据；
功能图（地理位置数据）{
“严格使用”；
var保证金=75，
宽度=1400-边距，
高度=600-边距；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度+边距）
.attr（“高度”，高度+边距）
.append（'g'）
.attr（'class'，'map'）；
var projection=d3.geo.mercator（）
.比例尺（150）
.翻译（[宽度/2，高度/1.5]）；
var path=d3.geo.path（）.projection（projection）；
var map=svg.selectAll（'path'）
.数据（地理位置数据.特征）
.输入（）
.append（'路径'）
.attr（'d'，路径）
.style（'填充'，'浅蓝色'）
.style（'笔划'，'黑色'）
.attr（“id”，函数（d）{
返回d.id；}）
.on（“点击”），功能（d，i）{
d3.选择（“.selected”）.classed（“selected”，false）。样式（'fill'，'lightBlue'）；
d3.选择（此）.classed（“selected”，true）.样式（'fill'，'red'）；
console.log（d.id）
显示器（d.id）
})
.样式（“笔划宽度”，0.5）；
};
json（“data/wrangledData_overallScore.json”，函数（error，json）{
如果（错误）返回控制台。警告（错误）；
data=json；
log（“JSON”，数据）；
});
功能显示（e）{
var population=data.map（函数（d）{returnd[“population”]}）；
console.log（填充）
}
/*
使用D3加载GeoJSON文件
*/
d3.json（“data/world countries.json”，draw）；

我可以得到id的索引，并使用它在population数组中查找population。但我需要根据身份证找到。有人能告诉我怎么才能得到这个吗

只需在它们之间循环，直到看到正确的id

for (var i in data) {
    if (data[i].Id == 'SWE') console.log(data[i]['Population']);
}

您还可以使用while循环或regular for循环。这里测试数据中的每个

“key”，因此每个数据段都是

data[i]

首先，由于您是JSON新手，所以需要进行一些术语更正以帮助您：JSON是字符串而不是对象，因此它是JavasscriptObjectNotation的缩写。你所拥有的被通俗地称为POJO或PlainOldJavascriptO对象。他们是不同的

现在回答你的问题。您有两种方法：

您可以在即将推出的ECMA 6阵列方法中使用多边形填充，并验证您的答案

或者，您可以使用ECMA 5功能推出自己的解决方案

第一种解决方案是使用文档中提供的多边形填充：

第二种方法基本上是以您选择的任何方式重新创建多边形填充，如果您选择该选项，我将把它作为一个练习留给您学习

if（！Array.prototype.find）{
Array.prototype.find=函数（谓词）{
if（this==null）{
抛出新的TypeError（'Array.prototype.find调用为null或未定义'）；
}
if（类型谓词！=='function'）{
抛出新类型错误（'谓词必须是函数'）；
}
变量列表=对象（此）；
var length=list.length>>>0；
var thisArg=参数[1]；
var值；
对于（变量i=0；i显示（“SWE”）效率高吗？因为每当我点击国家时，我都需要循环数组。有没有其他方法可以实现这一点？使用该数据结构，没有。如果有大量数组元素，应该不会有问题。如果需要，可以对结果进行散列，例如var lookup={}；对于（数据中的变量i）{lookup[data[i].Id]=data[i]；}console.log（lookup['SWE]）
谢谢您的建议。我会尝试的谢谢你提供的信息，我尝试了你的解决方案，但是我得到了countryData未定义的错误：函数display（e）{console.log（“e”，e）var countryData=data.find（函数（元素，索引，数组）{return element.id==e；}）；console.log（countryData.Population）}您正在匹配id
。需要匹配Id。用工作示例更新答案。我对类似问题的回答可能会有所帮助
var countryData = data.find(function(element, index, array) {
  return element.Id === 'SWE';
});

countryData.Population // 9592552