我使用radar-chart.js库（建立在D3之上）创建了雷达图。
我想使用相同的代码显示许多国家的雷达图。但是，并非所有国家都具有所有价值观。
Here is a plunker.
对于第一个示例（加拿大），您将看不到任何内容。这是因为它缺少生产轴的值。如果单击下拉列表以查看其他国家/地区，则会看到为它们显示的雷达图，因为它们具有所有值。
如何根据轴是否具有值来使其成为条件轴？起初我以为我可以做到-
filteredCorn.forEach(function(d){
if(d.value != NaN){
return corn = d.value;
}
else {return 0}
});
但是我不希望这些值不存在时为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>
和values.json是：
[
{
"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})
}
工作示例here
希望这可以帮助！