D3.js hierarchy按字段计算汇总

f8rj6qna 于 2023-04-30 发布在其他

关注(0)|答案(1)|浏览(109)

我的json是这样的：

var data = [{ "Id": 1, "Name": "a1", "Parent": null},
           { "Id": 2, "Name": "a2", "Parent": 1},
           { "Id": 3, "Name": "a3", "Parent": 2, "nb1": 30, "nb2": 40 },
           { "Id": 4, "Name": "a4", "Parent": 2, "nb1": 25, "nb2": 64 },
           { "Id": 5, "Name": "a5", "Parent": 1},
           { "Id": 6, "Name": "a6", "Parent": 5, "nb1": 2, "nb2": 6 },
           { "Id": 7, "Name": "a7", "Parent": 5, "nb1": 5, "nb2": 4 }];

使用d3js，我想用每个字段（nb1和nb2）的总和来构建层次json
我正在使用：

var treeData = d3.stratify().
id(function (d) { return d.Id; })
.parentId(function (d) { returnd.Parent; })(data);
treeData.sum(d=> d.nb1)

但它返回新的字段（值）和sum。我需要的是nb1的总和，并保持相同的字段名称nb1和nb2的总和，并保持相同的名称字段nb2的父母。
换句话说，定制d3js层次结构的sum函数。多谢了

d3.js

来源：https://stackoverflow.com/questions/67658559/d3-js-hierarchy-calculated-summary-by-field

1条答案

按热度按时间

vyu0f0g11#

使用递归buildNode函数：

const data = [
  { "Id": 1, "Name": "a1", "Parent": null},
  { "Id": 2, "Name": "a2", "Parent": 1},
  { "Id": 3, "Name": "a3", "Parent": 2, "nb1": 30, "nb2": 40 },
  { "Id": 4, "Name": "a4", "Parent": 2, "nb1": 25, "nb2": 64 },
  { "Id": 5, "Name": "a5", "Parent": 1},
  { "Id": 6, "Name": "a6", "Parent": 5, "nb1": 2, "nb2": 6 },
  { "Id": 7, "Name": "a7", "Parent": 5, "nb1": 5, "nb2": 4 }];
  
const getValue = (node, children, attr) => 
  children.length > 0 ? 
    children.reduce((s, n) => s + n[attr], 0) : 
    node[attr];

const buildNode = (node) => {
  const children = data
   .filter(n => n.Parent === node.Id)
   .map(n => buildNode(n));
  
  const nb1 = getValue(node, children, 'nb1');  
  const nb2 = getValue(node, children, 'nb2');  
  return {...node, children, nb1, nb2};
}
  
const root = buildNode(data.find(n => !n.Parent));  

console.log('ROOT: ', root)

赞(0）回复(0）举报 2023-04-30

我来回答

D3.js hierarchy按字段计算汇总

1条答案

相关问题

热门标签

最新问答