CODEWITHSUNDEEP
javascriptd3.jstreeradial
j0kaso
j0kaso

Reputation: 21

d3.j mixing radial tree with link (straight) tree

Related to this example (d3.j radial tree node links different sizes), I was wondering if it is possible to mix radial trees and straight-line trees in d3.js.

For my jsFiddle example: https://jsfiddle.net/j0kaso/fow6xbdL/ I would like to have the parent (level0) having a straight line to the first child (level1) and afterward the radial curved tree (as it is right now).

Is this possible?

I couldn't find anything related to it but as I'm relatively new to d3.js/JS I maybe just missed the right keywords. Hope somebody has a working example or could point me in the right direction - anyway I appreciate any hints & comments!

Upvotes: 2

Views: 579

Answers (1)

Tom Shanley
Tom Shanley

Reputation: 1787

Where the link's source's depth is 0, then you can generate a SVG path from the link's source and target's x and y, similar to how the node's positions are calculated using trigonometry, where x is the rotation angle and y is the radius.

    //create the linkRadial function for use later in the 'd' generation
    const radialPath = d3.linkRadial()
     .angle(l => l.x)
     .radius(l => l.y)

    const link = svg.append("g")
     .attr("fill", "none")
     .attr("stroke-opacity", 0.4)
     .attr("stroke-width", 1.5)
     .selectAll("path")
     .data(root.links())
     .enter()
     .append("path")

    link.attr("d", function(d){

            let adjust = 1.5708 //90 degrees in radians

            // calculate the start and end points of the path, using trig
            let sourceX = (d.source.y * Math.cos(d.source.x - adjust)); 
            let sourceY = (d.source.y * Math.sin(d.source.x - adjust)); 
            let targetX = (d.target.y * Math.cos(d.target.x - adjust)); 
            let targetY = (d.target.y * Math.sin(d.target.x -adjust)); 


            // if the source node is at the centre, depth = 0, then create a straight path using the L (lineto) SVG path. Else, use the radial path
            if (d.source.depth==0){
              return "M" + sourceX + " " + sourceY + " "
                + "L" + targetX + " " + targetY 
            } else {
              return radialPath(d)
            }

    })

Upvotes: 2

Related Questions