Javascript 使雷达图的轴以值的存在为条件
我使用radar-chart.js库(构建在D3之上)创建了一个雷达图。 我想用同样的代码显示许多国家的雷达图。然而,并非所有国家都有所有的价值观 您将看到第一个示例(加拿大),没有显示任何内容。这是因为它缺少生成轴的值。如果你点击下拉菜单查看其他国家,你会看到雷达图为他们显示,因为他们有所有的值 如何根据轴是否具有值使其具有条件?起初我以为我能做到-- 但我不希望值为0,如果它们不存在,我希望完全删除轴。有什么想法吗 PS-我知道我需要添加svg.exit来清理这个问题——但这不是我现在重点关注的。谢谢 完整代码:Javascript 使雷达图的轴以值的存在为条件,javascript,d3.js,Javascript,D3.js,我使用radar-chart.js库(构建在D3之上)创建了一个雷达图。 我想用同样的代码显示许多国家的雷达图。然而,并非所有国家都有所有的价值观 您将看到第一个示例(加拿大),没有显示任何内容。这是因为它缺少生成轴的值。如果你点击下拉菜单查看其他国家,你会看到雷达图为他们显示,因为他们有所有的值 如何根据轴是否具有值使其具有条件?起初我以为我能做到-- 但我不希望值为0,如果它们不存在,我希望完全删除轴。有什么想法吗 PS-我知道我需要添加svg.exit来清理这个问题——但这不是我现在重点
<!doctype html>
<html>
<head>
<style>
.radar-container{
position: relative;
width: 500px;
}
.radarhead{
position:relative;
width:50%;
float:left;
}
.radar-chart .area {
fill-opacity: 0.7;
}
.radar-chart.focus .area {
fill-opacity: 0.3;
}
.radar-chart.focus text {
font-size:13px;
text-shadow: 0px;
}
.radar-chart.focus .area.focused {
fill-opacity: 0.9;
}
.area.average, .average .circle {
fill: #ADD8E6 !important;
stroke: none;
}
.area.currentCountry, .currentCountry .circle {
fill: #00a0d5 !important;
stroke: none;
}
svg#colors{
float:right;
}
ul#radarleg{
margin:0px;
padding:0px;
float:right;
}
li{
list-style-type: none;
list-style-image: none;
padding-right: 7px;
text-align: right;
line-height: 142%;
}
</style>
</head>
<body>
<select id="opts">
<option value="BRA">Brazil</option>
<option value="CAN" selected="selected">Canada</option>
<option value="ETH">Ethiopia</option>
<option value="SUR">Suriname</option>
</select>
<div class="radar-container">
<svg id="colors" width="20" height="40"><rect x="0" y="0" width="12" height="12" fill="#4dbce1"></rect><rect x="0" y="23" width="12" height="12" fill="#c5e4ed"></rect></svg>
<ul id="radarleg">
<li class="radarlegendcname"></li>
<li>Average</li>
</ul>
</div>
</body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="radar-chart.js"></script>
<script>
var currentCountry;
radartitle = "Exports";
var filtered;
function filterJSON(json, key, value) {
var result = [];
for (var country in json) {
if (json[country][key] === value) {
result.push(json[country]);
}
}
return result;
}
d3.json("values.json", function(error, json){
d3.select('#opts')
.on("change", function () {
var section = document.getElementById("opts");
currentCountry = section.options[section.selectedIndex].value;
filtered = filterJSON(json, 'iso3', currentCountry);
updateChart(filtered);
});
console.log("json: ", json);
currentCountry = "CAN"
filtered = filterJSON(json, 'iso3', currentCountry);
updateChart(filtered);
console.log("filtered: ", filtered);
});
function updateChart(filtered){
filteredCorn = filterJSON(filtered, 'id', 103706);
filteredWheat = filterJSON(filtered, 'id', 103606);
filteredSoy = filterJSON(filtered, 'id', 68606);
filteredProduce = filterJSON(filtered, 'id', 38406);
var corn, wheat, soy, produce;
filteredCorn.forEach(function(d){
if(d.value != NaN){
return corn = d.value;
}
else {return 0}
});
filteredWheat.forEach(function(d){
wheat = d.value;
});
filteredSoy.forEach(function(d){
soy = d.value;
});
filteredProduce.forEach(function(d){
produce = d.value;
});
console.log("corn", corn);
console.log("wheat", wheat);
console.log("soy", soy);
console.log("produce", produce);
var data = [
{
className: 'currentCountry',
axes: [
{indicator: "Corn", value: corn},
{indicator: "Wheat", value: wheat},
{indicator: "Soy", value: soy},
{indicator: "Produce", value: produce}
]
}
];
RadarChart.defaultConfig.color = function() {};
RadarChart.defaultConfig.radius = 1;
RadarChart.defaultConfig.w = 400;
RadarChart.defaultConfig.h = 300;
var chart = RadarChart.chart();
var cfg = chart.config(); // retrieve default config
var radarhead = d3.select('.radar-container').append('text').attr('class','radarhead').html("<h3>" + radartitle + "</h3>");
d3.select('.radarlegendcname').append('text').html(currentCountry);
var svg = d3.select('.radar-container').append('svg')
.attr('width', RadarChart.defaultConfig.w + 50)
.attr('height', RadarChart.defaultConfig.h);
svg.append('g').classed('single', 1).datum(data).call(chart);
};
</script>
</body>
</html>
我建议您根据条件添加轴 与当前值加上轴类似: 大概是这样的:
var data = [
{
className: 'currentCountry',
axes: [
]
}
];
if (corn){
data[0].axes.push({indicator: "Corn", value: corn})
}
if (wheat){
data[0].axes.push({indicator: "Wheat", value: wheat})
}
if (soy){
data[0].axes.push({indicator: "Soy", value: soy})
}
if (produce){
data[0].axes.push({indicator: "Produce", value: produce})
}
工作示例
希望这有帮助 太好了!非常感谢,这太完美了。这真的帮了我的忙。
[
{
"id":103706,
"iso3":"BRA",
"country":"Brazil",
"value":19
},
{
"id":103706,
"iso3":"CAN",
"country":"Canada",
"value":17.3
},
{
"id":103706,
"iso3":"SUR",
"country":"Suriname",
"value":10.3
},
{
"id":103706,
"iso3":"ETH",
"country":"Ethiopia",
"value":5
},
{
"id":103606,
"iso3":"BRA",
"country":"Brazil",
"value":8
},
{
"id":103606,
"iso3":"CAN",
"country":"Canada",
"value":8.17
},
{
"id":103606,
"iso3":"SUR",
"country":"Suriname",
"value":14.13
},
{
"id":103606,
"iso3":"ETH",
"country":"Ethiopia",
"value":14.5
},
{
"id":68606,
"iso3":"BRA",
"country":"Brazil",
"value":4.39
},
{
"id":68606,
"iso3":"SUR",
"country":"Suriname",
"value":5.25
},
{
"id":68606,
"iso3":"ETH",
"country":"Ethiopia",
"value":34.17
},
{
"id":38406,
"iso3":"ETH",
"country":"Ethiopia",
"value":21.4
},
{
"id":38406,
"iso3":"BRA",
"country":"Brazil",
"value":20
},
{
"id":38406,
"iso3":"SUR",
"country":"Suriname",
"value":7
}
]
var data = [
{
className: 'currentCountry',
axes: [
]
}
];
if (corn){
data[0].axes.push({indicator: "Corn", value: corn})
}
if (wheat){
data[0].axes.push({indicator: "Wheat", value: wheat})
}
if (soy){
data[0].axes.push({indicator: "Soy", value: soy})
}
if (produce){
data[0].axes.push({indicator: "Produce", value: produce})
}