4

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;
  };
Abid
  • 344
  • 1
  • 4
  • 21
  • 1
    If the error is data dependent, sharing the data will be useful. Does the issue happen if you set stroke width to 1? (did you include all relevant code? I can't see where you set fill). – Andrew Reid Jul 13 '21 at 17:40
  • @AndrewReid i have included the fill. and the data has this kind of json format { "SOURCETYPE":"TABLE", "SOURCEID":1000, "SOURCE_DB":"hive", "SOURCE_SCHEMA":"hive.aggregated", "TARGETTYPE":"TABLE", "TARGETID":1000, "TARGET_DB":"hive", "TARGET_SCHEMA":"hive.aggregated.", "VALUE":8, "color":"#9edae5" }, – Abid Jul 14 '21 at 13:04

0 Answers0