D3 radial tidy tree / anndawn

radialTree = data=>{

let root = tree(data);

const svg = d3.select(DOM.svg(width, height))

.style("width", "100%")

.style("height", "auto")

.style("padding", "10px")

.style("box-sizing", "border-box")

.style("font", "12px sans-serif");

const g = svg.append("g");

const linkgroup = g.append("g")

.attr("fill", "none")

.attr("stroke", "#555")

.attr("stroke-opacity", 0.4)

.attr("stroke-width", 1.5);

const nodegroup = g.append("g")

.attr("stroke-linejoin", "round")

.attr("stroke-width", 3);

const myScale = d3.scaleLinear()

.domain([d3.min(root.leaves().map(leaf => leaf.data.value)), d3.max(root.leaves().map(leaf => leaf.data.value))])

.range([0.3, 1]);

function newdata (animate = true) {

let root = tree(data);

let links_data = root.links();

let links = linkgroup

.selectAll("path")

.data(links_data, d => d.source.data.name+"_"+d.target.data.name);

links.exit().remove();

let newlinks = links

.enter()

.append("path")

.attr("d", d3.linkRadial()

.angle(d => d.x)

.radius(0.1));

let t = d3.transition()

.duration(animate ? 600 : 0)

.ease(d3.easeLinear)

.on("end", function() {

const box = g.node().getBBox();

svg.transition().duration(0).attr("viewBox", `${box.x} ${box.y} ${box.width} ${box.height}`);

});

let alllinks = linkgroup.selectAll("path")

alllinks

.transition(t)

.attr("d", d3.linkRadial()

.angle(d => d.x)

.radius(d => d.y));

let nodes_data = root.descendants().reverse();

let nodes = nodegroup

.selectAll("g")

.data(nodes_data, function (d) {

if (d.parent) {

return d.parent.data.name+d.data.name;

}

return d.data.name});

nodes.exit().remove();

let newnodes = nodes

.enter().append("g");

let allnodes = animate ? nodegroup.selectAll("g").transition(t): nodegroup.selectAll("g");

allnodes

.attr("transform", d => `

rotate(${d.x * 180 / Math.PI - 90})

translate(${d.y},0)

`);

newnodes.append("circle")

.attr("r", 4.5)

.on('mouseover', function(d, slicedData){

if(d.children){

d3.select(this).style("cursor", "pointer")

}})

.on ("click", function (d) {

let altChildren = d.data.altChildren || [];

let children = d.data.children;

d.data.children = altChildren;

d.data.altChildren = children;

newdata ();

})

nodegroup.selectAll("g circle").attr("fill", function (d) {

let altChildren = d.data.altChildren || [];

let children = d.data.children;

return d.children || (children && (children.length > 0 || altChildren.length > 0)) ? "#555" : "#999" } )

//.attr("stroke", d => d.children ? "#34C97C" : "#161616")

.attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); })

.attr("fill-opacity", d => myScale(d.data.value))

/* .attr("fill-opacity", d => {

let min = d3.min(root.leaves().map(leaf => leaf.data.value))

let max = d3.max(root.leaves().map(leaf => leaf.data.value))

return (d.value-min)/(max-min)})

.attr("stroke-width", d=> d.children ? 2 : 2)*/

.attr("r", d => d.children ? 5:3)

.on('mouseover', function(d){

if(d.children){

d3.select(this).style("cursor", "pointer")

}})

newnodes.append("text")

.attr("dy", "0.31em")

.text(d => d.data.name)

.clone(true).lower()

.attr("stroke", "white")

;

nodegroup.selectAll("g text")

.attr("x", d => d.x < Math.PI === !d.children ? 6 : -6)

.attr("text-anchor", d => d.x < Math.PI === !d.children ? "start" : "end")

.attr("transform", d => d.x >= Math.PI ? "rotate(180)" : null)

.attr("dy", "0.31em")

.attr("x", d => d.x < Math.PI === !d.children ? 10 : -10)

.attr("text-anchor", d => d.x < Math.PI === !d.children ? "start" : "end")

.attr("transform", d => d.x >= Math.PI ? "rotate(180)" : null)

//.attr("transform", d => d.x >= Math.PI ? "rotate(180)" : (d.parent ? null:"rotate(-90)"))

//.attr("y", d => d.parent ? 0 : - 10)

.style("font", d => d.children ? "12px sans-serif": "12px sans-serif")

//.style("text-transform", d => d.children ? "uppercase": null)

.style("font-weight", d => d.children ? "bold": "normal")

.attr("fill", d => d.children ? "#161616": "#161616")

.text(d => d.data.name)

.filter(d => d.children)

.clone(true).lower()

.attr("stroke", "white")

.attr("stroke-width", 4);

}

newdata (false);

document.body.appendChild(svg.node());

const box = g.node().getBBox();

//box.width = box.height = Math.max(box.width, box.height)*1.2;

svg.remove()

.attr("width", box.width)

.attr("height", box.height)

.attr("viewBox", `${box.x} ${box.y} ${box.width} ${box.height}`);

svg.call(d3.zoom()

.extent([[0, 0], [width, height]])

.scaleExtent([1, 8])

.on("zoom", zoomed));

function zoomed() {

g.attr("transform", d3.event.transform);

}

return svg.node();

}

height = 1000

tooltip = d3

.select('body')

.append('div')

.attr('class', 'd3-tooltip')

.style('position', 'absolute')

.style('z-index', '10')

.style('visibility', 'hidden')

.style('padding', '10px')

.style('background', 'rgba(0,0,0,0.6)')

.style('border-radius', '4px')

.style('color', '#fff')

.text('a simple tooltip');

color = d3.scaleOrdinal()

.domain(tree(data).leaves().map(d => {return d.parent.data.name}))

.range(d3.schemeCategory10)

One platform to build and deploy the best data apps