D3.js-如何获取对象中指定键的最大值答案

【问题标题】：D3.js-How can I get the maximum value of a specified key in an objectD3.js-如何获取对象中指定键的最大值
【发布时间】：2016-11-06 15:07:27
【问题描述】：

我有这个数组

  data =[
    {id: "27",  name: "Burger King", sum: "900"}, 
    {id: "4",  name: "Eggs(4)", sum: "896"}, 
    {id: "5",  name: "Hamburger",  sum: "910"}, 
    {id: "8",  name: "Mac & Cheese", sum: "761"}, 
    {id: "56",  name: "McDonalds", sum: "1260"} 
 ];

我想提取总和的最大值并将其附加到 li 标签。这是我的 d3.js 代码：

 function add_max(){
 d3.select('#my_ul_tag).data(data).append('li')
    .text(function(d) { 
            return 'Max ' + d3.max(d.sum); 
    });

 }
    add_max();

它的作用是从数组中的第一个对象（在上面的示例中为 900）获取值，然后将其视为数组并提取最大值，在本例中为 9。因此，如果值为 785，那么它将返回 8，因为它大于 7 和 5。字符串“Max 8”将正确附加到 ul，但值“8”不正确。我要找的是最大值1260。这对我来说很奇怪。谁能帮我理解这个问题？谢谢！

【问题讨论】：

标签： javascript jquery d3.js

【解决方案1】：

您的属性是字符串，但您想将它们视为数字。清理整个事情正确的d3 解决方案是：

function add_max() {
  var maxValue = d3.max(data, function(d){
    return +d.sum; //<-- convert to number
  })
  d3.select('#my_ul_tag').append('li')
    .text(maxValue);
}

运行代码：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
  
  <ul id="my_ul_tag"></ul>
  
  <script>
    var data = [{
      id: "27",
      name: "Burger King",
      sum: "900"
    }, {
      id: "4",
      name: "Eggs(4)",
      sum: "896"
    }, {
      id: "5",
      name: "Hamburger",
      sum: "910"
    }, {
      id: "8",
      name: "Mac & Cheese",
      sum: "761"
    }, {
      id: "56",
      name: "McDonalds",
      sum: "1260"
    }];

    function add_max() {
      var maxValue = d3.max(data, function(d){
        return +d.sum;
      })
      d3.select('#my_ul_tag').append('li')
        .text(maxValue);
    }
    
    add_max();
  </script>
</body>

</html>

【讨论】：

【解决方案2】：

你可以使用 reduce 来实现它。该提案返回sum的最大值。

var data = [{ id: "27", name: "Burger King", sum: "900" }, { id: "4", name: "Eggs(4)", sum: "896" }, { id: "5", name: "Hamburger", sum: "910" }, { id: "8", name: "Mac & Cheese", sum: "761" }, { id: "56", name: "McDonalds", sum: "1260" }],
    max = data.map(function (o) {
        return o.sum.split('').reduce(function (r, b) {
            return r > b ? r : b;
        }, 0);            
    });
   
console.log(max);

【讨论】：