Saturday, 4 January 2020

How to make curved lines to straight lines for Hierarchy Chart using d3.js

Source Image

I found one sample example in d3.js with employees hierarchy.I am facing issue while changing the curve lines to straight line like below image.

var attrs = {
    EXPAND_SYMBOL: '\uf067',    
    COLLAPSE_SYMBOL: '\uf068',
    selector: params.selector,
    root: params.data,
    width: params.chartWidth,
    height: params.chartHeight,
    index: 0,
    nodePadding: 9,
    collapseCircleRadius: 7,
    nodeHeight: 50,
    nodeWidth: 210,
    duration: 750,
    rootNodeTopMargin: 20,
    minMaxZoomProportions: [0.05, 3],
    linkLineSize: 180,
    collapsibleFontSize: '10px',
    userIcon: '\uf007',
    nodeStroke: "#ccc",
    nodeStrokeWidth: '1px'
  }

var diagonal = d3.svg.diagonal()
    .projection(function(d) {      
      return [d.x + attrs.nodeWidth / 2, d.y + attrs.nodeHeight / 2];
    });

I have tried with the above two codes.I am unable to get the curves like below Image.Could you help me on this issue.

Target Image
(source: noaa.gov)

Below link is Chart refrence link.

Employees Hierarchy Chart



from How to make curved lines to straight lines for Hierarchy Chart using d3.js

No comments:

Post a Comment