在桑基图中显示总值

Question

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

例如，fiddle下面显示水果>放置。我想知道有多少水果喜欢这些地方以及有多少水果链接在一起。所以像：

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

这三个都链接到地点 A，所以地点 A 应该是：

(7) Place A

(多1个是因为Grape)

http://jsfiddle.net/Khrys/5c2urqbx/

更新： 看起来 v42 默认增加了权重。

Answer 1

如果您使用 d3.js sankey，它将自动对值求和并按照此示例将其显示在工具提示中...http://bl.ocks.org/d3noob/c9b90689c1438f57d649

Answer 2

看看这个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 3

这解决了当您拥有多级桑基图时已接受答案的问题

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

假设我有一些 arr "chart" 和多层次桑基图数据

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];
  }

});

在桑基图中显示总值

Show total values in Sankey Diagram

google-visualization

sankey-diagram