d3 在哪里为 sankey / 不同的浏览器排序这些数据

Question

我在 d3 中有一个 Sankey 图： http://greencracker.github.io/test/

我希望节点和链接都按照从顶部最大到底部最小的顺序排序。

我已经按照我想要的方式对节点进行了排序，方法是像这样修改 sankey.js：

  function center(node) {
  // return node.y + node.dy / 2;
  return 0;}

经过修改后，它在 Safari 8 上看起来很完美。

在 Firefox 中，Chrome，节点仍然像我希望的那样从大到小排序，耶！

但是链接是从顶部的最小链接到底部的大链接排序的。

在哪里指定排序以便所有浏览器都按照我想要的方式排序？我会想在 index.html?

的某个地方

有什么想法吗？

这里是我所追求的截图： http://greencracker.net/?p=2237

Answer 1

函数中

function ascendingTargetDepth(a, b) {
  return a.target.y + b.target.y;
  // return 0;
}

你应该 a.target.y - b.target.y; 代替。

Answer 2

使用类似

的函数

function ascendingLinkSize(a, b) {
  return a.value - b.value;
  // return 0;
}

按 link 大小而不是节点位置排序

Answer 3

您将需要修改 relaxLeftToRight 和 relaxRightToLeft 函数。以下是更新后的功能：

function relaxLeftToRight(alpha) {
  nodesByBreadth.forEach(function(nodes, breadth) {
    nodes.forEach(function(node) {
      if (node.targetLinks.length) {
        // Value-weighted average of the y-position of source node centers linked to this node.
        // var y = d3.sum(node.targetLinks, weightedSource) / d3.sum(node.targetLinks, value);
        var y = d3.sum(node.targetLinks) ;
        node.y += (y - center(node)) * alpha;
      }
    });
  });

  function weightedSource(link) {
    return (link.source.y + link.sy + link.dy / 2) * link.value;
  }
}

function relaxRightToLeft(alpha) {
  nodesByBreadth.slice().reverse().forEach(function(nodes) {
    nodes.forEach(function(node) {
      if (node.sourceLinks.length) {
        // Value-weighted average of the y-positions of target nodes linked to this node.
        // var y = d3.sum(node.sourceLinks, weightedTarget) / d3.sum(node.sourceLinks, value);
        var y = d3.sum(node.sourceLinks);
        node.y += (y - center(node)) * alpha;
      }
    });
  });

  function weightedTarget(link) {
    return (link.target.y + link.ty + link.dy / 2) * link.value;
  }
}

此示例将按从大到小排序。

d3 在哪里为 sankey / 不同的浏览器排序这些数据

Where to d3 sort this data for sankey / different browsers

sorting

d3.js

sankey-diagram