const x = d3.scaleLinear().rangeRound([0, width]);

const y = d3.scaleLinear().rangeRound([0, height]);

const svg = d3.create("svg")

.attr("viewBox", [0.5, -30.5, width, height + 35])

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

let group = svg.append("g")

.call(render, treemap(data));

function render(group, root) {

const node = group

.selectAll("g")

.data(root.children.concat(root))

.join("g");

node.filter(d => d === root ? d.parent : d.children)

.attr("cursor", "pointer")

.on("click", (event, d) => d === root ? zoomout(root) : zoomin(d))

const myScale = d3.scaleLinear()

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

.range([0.4, 1]);

node.append("rect")

.attr("id", d => (d.leafUid = DOM.uid("leaf")).id)

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

.attr("fill-opacity", d => d.depth <= 1 ? 1 : myScale(d.value))

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

.on("mouseover", function(d, data) {

if(data.depth == 0){

tooltip2

.html("<link rel=preconnect href=https://fonts.gstatic.com> <link href=https://fonts.googleapis.com/css2?family=Montserrat&display=swap rel=stylesheet><div class=full-width><h1 class=h1full-width>"+ plus+"Relevance: " + data.value + "</h1></div><h1 class=h1tooltipcircle>Algorithm</h1><hr><p>" + data.data.name + "</p>")

.style('visibility', 'visible');

}

if(data.depth == 1){

tooltip2

.html("<link rel=preconnect href=https://fonts.gstatic.com> <link href=https://fonts.googleapis.com/css2?family=Montserrat&display=swap rel=stylesheet><div class=full-width><h1 class=h1full-width>"+ plus+"Relevance: " + data.value + "</h1></div><h1 class=h1tooltipcircle>Domain</h1><hr><p>" + data.data.name + "</p>")

.style('visibility', 'visible');

}

if(data.depth == 2){

tooltip

.html("<link rel=preconnect href=https://fonts.gstatic.com> <link href=https://fonts.googleapis.com/css2?family=Montserrat&display=swap rel=stylesheet><div class=full-width><h1 class=h1full-width>"+ plus+"Relevance: " + data.data.value + "</h1></div><h1 class=h1tooltipcircle>Year</h1><hr><p>" + data.data.year + "</p><h1 class=h1tooltipcircle>Title</h1><hr><p>" + data.data.name + "</p><h1 class=h1tooltipcircle>DOI</h1><hr><p>" + data.data.DOI + "</p><h1 class=h1tooltipcircle>Knowlage Domain</h1><p>" + data.data.domain + "</p><h1 class=h1tooltipcircle>Keywords</h1><p>" + data.data.keywords + "</p><h1 class=h1tooltipcircle>Authors</h1><p>" + data.data.authors + "</p>")

.style('visibility', 'visible');

}

if(data.depth == 3){

tooltip

.html("<link rel=preconnect href=https://fonts.gstatic.com> <link href=https://fonts.googleapis.com/css2?family=Montserrat&display=swap rel=stylesheet><div class=full-width><h1 class=h1full-width>"+ plus+"Relevance: " + data.data.value + "</h1></div><h1 class=h1tooltipcircle>Year</h1><hr><p>" + data.data.year + "</p><h1 class=h1tooltipcircle>Title</h1><hr><p>" + data.data.name + "</p><h1 class=h1tooltipcircle>DOI</h1><hr><p>" + data.data.DOI + "</p><h1 class=h1tooltipcircle>Knowlage Domain</h1><p>" + data.data.domain + "</p><h1 class=h1tooltipcircle>Keywords</h1><p>" + data.data.keywords + "</p><h1 class=h1tooltipcircle>Authors</h1><p>" + data.data.authors + "</p>")

.style('visibility', 'visible');

}

}).on('mousemove', function (d,data) {

if(data.depth == 0){

tooltip2

.style('top', d.clientY + 10 + 'px')

.style('left', d.clientX + 20 + 'px')

.style("display", "inline-block");

}

if(data.depth == 1){

tooltip2

.style('top', d.clientY + 10 + 'px')

.style('left', d.clientX + 20 + 'px')

.style("display", "inline-block");

}

if(data.depth == 2){

tooltip

.style('top', d.clientY + 10 + 'px')

.style('left', d.clientX + 20 + 'px')

.style("display", "inline-block");

}

if(data.depth == 3){

tooltip

.style('top', d.clientY + 10 + 'px')

.style('left', d.clientX + 20 + 'px')

.style("display", "inline-block");

}

})

.on('mouseout', function (d,data) {

if(data.depth == 0){

tooltip2.style('visibility', 'hidden');

}

if(data.depth == 1){

tooltip2.style('visibility', 'hidden');

}

if(data.depth == 2){

tooltip.style('visibility', 'hidden');

}

if(data.depth == 3){

tooltip.style('visibility', 'hidden');

}

});

//-----------------------------------------------------------

node.append("clipPath")

.attr("id", d => (d.clipUid = DOM.uid("clip")).id)

.append("use")

.attr("xlink:href", d => d.leafUid.href);

node.append("text")

.attr("clip-path", d => d.clipUid)

.attr("font-weight", d => d === root ? "bold" : null)

.selectAll("tspan")

.data(d => (d === root ? name(d) : d.data.name).split())

.join("tspan")

.attr("x", 10)

.attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`)

.attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 1: null)

.attr("font-weight", (d, i, nodes) => i === nodes.length - 1 ? "bold" : null)

.text(d => d);

group.call(position, root);

}

function position(group, root) {

group.selectAll("g")

.attr("transform", d => d === root ? `translate(0,-30)` : `translate(${x(d.x0)},${y(d.y0)})`)

.select("rect")

.attr("width", d => d === root ? width : x(d.x1) - x(d.x0))

.attr("height", d => d === root ? 30 : y(d.y1) - y(d.y0));

}

// When zooming in, draw the new nodes on top, and fade them in.

function zoomin(d) {

const group0 = group.attr("pointer-events", "none");

const group1 = group = svg.append("g").call(render, d);

x.domain([d.x0, d.x1]);

y.domain([d.y0, d.y1]);

svg.transition()

.duration(750)

.call(t => group0.transition(t).remove()

.call(position, d.parent))

.call(t => group1.transition(t)

.attrTween("opacity", () => d3.interpolate(0, 1))

.call(position, d));

}

// When zooming out, draw the old nodes on top, and fade them out.

function zoomout(d) {

const group0 = group.attr("pointer-events", "none");

const group1 = group = svg.insert("g", "*").call(render, d.parent);

x.domain([d.parent.x0, d.parent.x1]);

y.domain([d.parent.y0, d.parent.y1]);

svg.transition()

.duration(750)

.call(t => group0.transition(t).remove()

.attrTween("opacity", () => d3.interpolate(1, 0))

.call(position, d))

.call(t => group1.transition(t)

.call(position, d.parent));

}

return svg.node();

}