d3.js - d3 版本 3 sankey 未对齐并且路径超出了其源和目标边界

Question

当我们有大量数据时，路径超出了。当源和目标具有较大的冲击宽度时会出现此问题。有没有办法让我可以修复不超过边界的路径。谢谢你

我的代码

var svg = d3.select("#chart").append("svg")
.attr("width", width1.schemaWidth  + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("class", "svgchart")
.append("g")
.attr("transform", 
      "translate(" + (nodeTextMaxLength*5.5) + "," + margin.top + ")");

var sankey = d3.sankey()
    .nodeWidth(30)
    .nodePadding(8)
    .size([width1.schemaWidth, height]);

var path = sankey.link();

var div = d3.select("body").append("div")   
    .attr("class", "tooltipsankey")               
    .style("opacity", 0);    

link = svg.append("g").selectAll(".link")
      .data(graph.links)
      .enter().append("path")
      .attr("class", "linksankey")
      .attr("d", path)
      .attr("id", function(d) { return "link" + d.source.name; })
      .style("stroke-width", function(d) { return Math.max(1, d.dy); })
      .style("stroke", function(d) { 
          return d.color; });

rect = node.append("rect")
      .attr("height", function(d) { return d.dy; })
      .attr("width", function(d) {
          return sankey.nodeWidth() 
      }).style("fill", function(d) { return color(d.name) });

问题在源端和目标端。

桑基链接法

sankey.link = function() {
    var curvature = .5;
    function link(d) {
      var x0 = d.source.x + d.source.dx,
          x1 = d.target.x - 50,
          xi = d3.interpolateNumber(x0, x1),
          x2 = xi(curvature),
          x3 = xi(1 - curvature),
          y0 = d.source.y + d.sy + d.dy / 2,
          y1 = d.target.y + d.ty + d.dy / 2;
      return "M" + x0 + "," + y0
           + "C" + x2 + "," + y0
           + " " + x3 + "," + y1
           + " " + x1 + "," + y1;
    }

    link.curvature = function(_) {
      if (!arguments.length) return curvature;
      curvature = +_;
      return link;
    };

    return link;
  }; 

标签： d3.jssankey-diagram