在Sankey图中显示总价值

Question

是否可以在sankey图中显示总数？

例如，提琴波纹显示水果> 地方。我想知道有多少水果是喜欢的地方，在地方有多少水果链接。所以像这样。

Mango (3)
Apple (2)
Pineapple (1)

三种水果都与A地相连，所以A地应该是。

(7) Place A

(多1个是因为葡萄)

http:/jsfiddle.netKhrys5c2urqbx

更新。 看来v42默认增加了重量。

Answer 1

看看这个 jsfiddle

编码

data1 = [
              ['Apple', 'Place A', 1],
              ['Apple', 'Place A', 1],
              ['Grape', 'Place A', 1],
              ['Grape', 'Place B', 2],
              ['Pineapple', 'Place A', 1],
              ['Strawberry', 'Place B', 4],
              ['Mango', 'Place A', 3]
];

var sourceTotals = {};

for (var i = 0; i < data1.length; i++) {
    var item = data1[i],
        key = item[0];
    if (sourceTotals.hasOwnProperty(key)) {
        sourceTotals[key] += item[2];
    }
    else {
        sourceTotals[key] = item[2];
    }
}

console.log(sourceTotals);

var destTotals = {};

for (var i = 0; i < data1.length; i++) {
    var item = data1[i],
        key = item[1];
    if (destTotals.hasOwnProperty(key)) {
        destTotals[key] += item[2];
    }
    else {
        destTotals[key] = item[2];
    }
}

console.log(destTotals);

data1.forEach( function(d) {
    d[0] = d[0] + " (" + sourceTotals[d[0]] + ")";
    d[1] = "(" + destTotals[d[1]] + ") " + d[1];
})

Answer 2

如果你使用d3.js sankey，它会自动求和并显示在工具提示中，就像这个例子......http:/bl.ocks.orgd3noobc9b90689c1438f57d649。

Answer 3

这就解决了当你有多层次的sankey图时的公认答案的问题。

参照原答案计算 "sourceTotals "和 "destTotals"

假设我有一些带有多层次sankey图数据的arr "图表"。

this.chart = {
  type: 'Sankey',
  title: '',
  data: [
    [ 'USA', 'Mexico', 15 ],
    [ 'USA', 'Brazil', 16 ],
    [ 'South America', 'Mexico', 4 ],
    [ 'South America', 'Brazil', 4 ],
    [ 'Jamaica', 'Mexico', 18 ],
    [ 'South Africa', 'Brazil', 2 ],
    [ 'England', 'Brazil', 9 ],
    [ 'England', 'Mexico', 9 ],
    [ 'Mexico', 'Japan', 4 ],
    [ 'Mexico', 'North Pole', 4 ],
    [ 'China', 'Denmark', 5 ],
    [ 'China', 'Canada', 7 ],
    [ 'Mexico', 'China', 10 ],
  ],
}

首先删除出现在sourceTotals对象中的目的键。

    for (const key in destTotals) {
      if (destTotals.hasOwnProperty(key)) {
        if (sourceTotals.hasOwnProperty(key)) {
          delete sourceTotals[key];
        }
      }
    }

  isKeyInObject(query, object) {
    for (const key in object) {
      if (object.hasOwnProperty(query)) {
        return true;
      }
    }
    return false;
  }

this.chart.data.forEach( (d) => {

  // Check if d[0] key is in source totals
  if (this.isKeyInObject(d[0], sourceTotals)) {
    d[0] = d[0] + ' (' + sourceTotals[d[0]] + ')';
  }

  // check of d[1] key exists in dest totals
  if (this.isKeyInObject(d[1], destTotals)) {
    d[1] = '(' + destTotals[d[1]] + ') ' + d[1];
  }

  // deal with destination keys in source index in original arr
  // check if key in position 0 of original chart data is available in destTotals object
  // change its name to the name key in destTotals
  if (this.isKeyInObject(d[0], destTotals)) {
    console.log('POS_ZERO_IN_DEST', d[0]);
    d[0] = '(' + destTotals[d[0]] + ') ' + d[0];
  }

});