Question

我有这个数组

  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.这对我来说很奇怪。任何人都可以帮我理解这个问题吗？谢谢！

Answer 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);
}

运行代码：

＆＃13;

<!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>

＆＃13;

Answer 2

你可以使用reduce。此提案会返回sum的数字的最大值。

＆＃13;

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);

＆＃13;

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

2 个答案: