获取分组条形图 y 域的 d3.max 值

Question

我创建了一个分组条形图，并尝试将 y 域设置为最大条形值。这样做而不是根据数据更改静态数字。我对如何在 CSV 文件中的多列中使用

d3.max()

感到困惑。我正在尝试这样做，以便您不必使用特定的列名称，因为这在其他 CSV 文件中可能有所不同。现在列名称为 cat1、cat2 和 cat3。我正在使用 D3 v7

数据

name,cat1,cat2,cat3
Item 1,50,102,302
Item 2,79,140,330
Item 3,200,180,120
Item 4,104,80,83
Item 5,90,320,130
Item 6,85,114,130

我有点理解如何使用

d3.max()

，但绝对不是在这种情况下。

这是我目前的使用方式。您会看到我在 y 域中设置了

350

。现在我只是尝试控制台记录最大值。我意识到我没有正确执行此操作，但不知道该怎么做。

D3

const data = await d3.csv(src); 

  console.log(d3.max(data, d => {
    return d;
  }));
  // returns {name: 'Item 1', cat1: '50', cat2: '102', cat3: '302'}
  
  // Would like to use the max value
  // rather than 350
  y.domain([350, 0])
   .range([0, height]);

谢谢您的帮助。

Answer 1

let data = [{
    name: 'Item 1',
    cat1: 50,
    cat2: 102,
    cat3: 302
},
{
    name: 'Item 2',
    cat1: 79,
    cat2: 140,
    cat3: 330
},
{
    name: 'Item 3',
    cat1: 200,
    cat2: 180,
    cat3: 120      
},
{
    name: 'Item 4',
    cat1: 104,
    cat2: 80,
    cat3: 83    
},
{
    name: 'Item 5',
    cat1: 90,
    cat2: 320,
    cat3: 130       
},
{
    name: 'Item 6',
    cat1: 85,
    cat2: 114,
    cat3: 130   
}
]

let max = d3.max(data, ((d)=> (d.cat1,d.cat2,d.cat3)));
let result = data.find((d) => d.cat1 == max || d.cat2 == max || d.cat3 == max);
console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>