javascript - 如何在 d3 sankey 插件中强制一个分支的 y 位置？

Question

我想强制桑基图的一个分支在最上面。

而不是像这样的图表:

想要生成图表，其中节点 1、2、7、15、10 和 14 始终位于顶部:

摆弄当前代码的链接:http://jsfiddle.net/w5jfp9t0/1/

var margin = {top: 1, right: 1, bottom: 6, left: 1};
var width = 1052 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;

var formatNumber = d3.format(",.0f"),
    format = function(d) { return formatNumber(d); },
    color = d3.scale.category20();

var svg = d3.select("#chart_sankey").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var sankey = d3.sankey()
                         .nodeWidth(35)
                         .nodePadding(10)
                         .size([width, height]);

var path = sankey.link();

raw = '{"nodes":[{"name":"Node 1"},{"name":"Node 2"},{"name":"Node 3"},{"name":"Node 4"},{"name":"Node 5"},{"name":"Node 6"},{"name":"Node 7"},{"name":"Node 8"},{"name":"Node 9"},{"name":"Node 10"},{"name":"Node 11"},{"name":"Node 12"},{"name":"Node 13"},{"name":"Node 14"},{"name":"Node 15"}],"links":[{"source":9,"target":13,"value":25},{"source":14,"target":9,"value":37},{"source":14,"target":11,"value":16},{"source":14,"target":12,"value":8},{"source":14,"target":10,"value":68},{"source":6,"target":14,"value":154},{"source":6,"target":8,"value":40},{"source":1,"target":6,"value":345},{"source":1,"target":7,"value":66},{"source":1,"target":3,"value":17},{"source":1,"target":4,"value":25},{"source":1,"target":5,"value":117},{"source":0,"target":1,"value":692},{"source":0,"target":2,"value":19}]}';
data = JSON.parse(raw);

sankey.nodes(data.nodes)
    .links(data.links)
    .layout(32);

var link = svg.append("g")
            .selectAll(".link")
            .data(data.links)
            .enter().append("path")
            .attr("class", "link")
            .attr("d", path)
            .style("stroke-width", function(d) { return Math.max(1, d.dy); })
            .sort(function(a, b) { return b.dy - a.dy; });

var nodes = data.nodes;

var node = svg.append("g").selectAll(".node")
    .data(nodes)
  .enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")"; })
  .call(d3.behavior.drag()
    .origin(function(d) { return d; })
    .on("dragstart", function() { this.parentNode.appendChild(this); })
    .on("drag", dragmove));

sankey.relayout();

node.filter(function(d) { return d.value != 0; }) // append text only if node value is not zero
    .append("rect")
    .attr("height", function(d) { return d.dy; })
    .attr("width", sankey.nodeWidth())
    .style("fill", function(d) { return d.color = color(d.name.replace(/ .*/, "")); })
    .style("stroke", function(d) { return d3.rgb(d.color).darker(2); })
  .append("title")
    .text(function(d) { return d.name + "\n" + format(d.value); });

node.filter(function(d) { return d.value != 0; }) // append text only if node value is not zero
    .append("text")
    .attr("x", -6)
    .attr("y", function(d) { return d.dy / 2; })
    .attr("dy", ".35em")
    .attr("text-anchor", "end")
    .attr("transform", null)
    .text(function(d) { return d.name; })
    .filter(function(d) { return d.x == 0; }) // at first column append text after column
    .attr("x", 6 + sankey.nodeWidth())
    .attr("text-anchor", "start");

function dragmove(d) {
  d3.select(this).attr("transform", "translate(" + d.x + "," + (d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) +  ")");
  sankey.relayout();
  link.attr("d", path);
}

我需要更改什么才能实现此目的？

Answer 1

注意老实说，我从来没有用过那个插件。我没有看到直接获得所需行为的选项 - 因此我查看了 sankey.js 的源代码以进行调整。下面我展示了我将如何修改——你可能想要更彻底地修改:)

想法

查看 sankey.js 的代码，您会看到使用 center 函数放置节点(y 方向):

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

由于我没有看到更改该行为的参数，您可以将其更改为:

function center(node) {
  return 0;
}

如果您随后还恢复排序顺序:

function ascendingDepth(a, b) {
  return b.y - a.y;
}

你得到如下图片: