Question

我使用radar-chart.js库（建立在D3之上）创建了雷达图表。我想用相同的代码来显示许多国家的雷达图。但是，并非所有国家都拥有所有价值观。

你会看到第一个例子（加拿大），没有任何显示。这是因为它缺少了生产轴的值。如果您点击下拉列表查看其他国家/地区，您会看到雷达图表显示给他们，因为他们拥有所有值。

如何根据轴是否有值来使轴成为条件？起初我以为我可以这样做 -

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
    }
    ]

Answer 1

我建议您根据条件添加轴。

如果存在的值添加轴，则类似：

这样的事情：

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

希望这有帮助！

使雷达图的轴有条件地存在价值

1 个答案: