d3 version 3 sankey misaligning and the path is exceeded its source and target boundaries

Viewed 64

the path is exceeding when we have huge data. getting this issue when the source and target have bigger shock width . is there a way when i can fix the path not to exceed the borders. thankyou

enter image description here

my code

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

the issue is on both source and target side.

sankey link method

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;
  }; 
0 Answers
Related