I have an svg (can be viewed here) to which I would like to present some data on click. The Data is in json format and I would like to match each id of svg element with key in json data if both of these are same then do something. For example if Json key is key: china and element id is china then present information of china from json. I have already extracted the desired format of data I just cannot figure out how to match these keys with the element ids.
我有一个svg(可以在这里查看)，我想在单击时向它显示一些数据。数据是json格式的，我希望将svg元素的每个id与json数据中的键匹配，如果这两个id都相同，那就做点什么。例如，如果Json键为key: china，元素id为china，则从Json中显示中国的信息。我已经提取了所需的数据格式，只是不知道如何将这些键与元素id匹配。
This is how I am accessing the dataset
这就是我访问数据集的方式
var countriesByName = d3.nest()
.key(function (d) {
return d.Country_Names;
})
.entries(data);
// creating dropdown
var data = JSON.stringify(countriesByName)
var data = JSON.parse(data);
//this is the key I would like to match with element ids:
var keys = function( d ) {
return d.key;
}
From this the format of json changes to
从这一格式，json更改为。
[{"key":"Albania",
"values": [{"Continent":"Europe",
"Country_Names":"Albania",
"Total":"3.8",
"Change_total":"-38.7",
"Main activity electricity and heat production":"0.1",
"Main activity electricity plants":"",
"Main activity CHP plants":"","Unallocated autoproducers / Other energy industry own use":"0.1",
"Other":"1.4",
"Manufacturing industries and construction":"1",
"Iron and steel":"0",
"Chemical and petrochemical":"0",
"Machinery":"",
"Mining and quarrying":"",
"Food and tobacco":"0.1",
"Paper, pulp and printing":"",
"Construction":"0",
"Transport":"2.2",
"Road":"2.2",
"Domestic aviation":"",
"Rail":"0",
"Domestic navigation":"0.1",
"Residential":"0.2",
"Commercial and public services":"0",
"Agriculture/forestry":"0.2",
"Sub-bituminous coal / Lignite":"",
"Other bituminous coal":"",
"Natural gas":"0",
"Motor gasoline excl. bio":"0.3",
"Gas/diesel oil excl. bio":"2.2"}]}
fiddle: https://jsfiddle.net/n5v84svm/47/
小提琴:https://jsfiddle.net/n5v84svm/47/
1 个解决方案
#1
1
You can get the JSON data from the remote URL, then you can filter with any key value to get the particular data object form the data source. Please check the below code. Apologies if My solution is wrong for your problem.
您可以从远程URL获取JSON数据，然后可以使用任何键值进行筛选，以从数据源中获取特定的数据对象。请检查下面的代码。如果我的解决方法对你的问题是错误的，请向我道歉。
//Get Data from the Remote URL
var countryData=$.get("https://gist.githubusercontent.com/heenaI/cbbc5c5f49994f174376/raw/c3f7ea250a2039c9edca0b12a530f108d6304e1c/data.json");
countryData=JSON.parse(countryData.responseText);
//this is the key I would like to match with element ids:
var keys = function( d ) {
var keyData=data.filter(function(value) { return value.Country_Names == d;});
return keyData;
}
#1
1
You can get the JSON data from the remote URL, then you can filter with any key value to get the particular data object form the data source. Please check the below code. Apologies if My solution is wrong for your problem.
您可以从远程URL获取JSON数据，然后可以使用任何键值进行筛选，以从数据源中获取特定的数据对象。请检查下面的代码。如果我的解决方法对你的问题是错误的，请向我道歉。
//Get Data from the Remote URL
var countryData=$.get("https://gist.githubusercontent.com/heenaI/cbbc5c5f49994f174376/raw/c3f7ea250a2039c9edca0b12a530f108d6304e1c/data.json");
countryData=JSON.parse(countryData.responseText);
//this is the key I would like to match with element ids:
var keys = function( d ) {
var keyData=data.filter(function(value) { return value.Country_Names == d;});
return keyData;
}