chart = { 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("

"+ plus+"Relevance: " + data.value + "

Algorithm

" + data.data.name + "

") .style('visibility', 'visible'); } if(data.depth == 1){ tooltip2 .html("

"+ plus+"Relevance: " + data.value + "

Domain

" + data.data.name + "

") .style('visibility', 'visible'); } if(data.depth == 2){ tooltip .html("

"+ plus+"Relevance: " + data.data.value + "

Year

" + data.data.year + "

Title

" + data.data.name + "

DOI

" + data.data.DOI + "

Knowlage Domain

" + data.data.domain + "

Keywords

" + data.data.keywords + "

Authors

" + data.data.authors + "

") .style('visibility', 'visible'); } if(data.depth == 3){ tooltip .html("

"+ plus+"Relevance: " + data.data.value + "

Year

" + data.data.year + "

Title

" + data.data.name + "

DOI

" + data.data.DOI + "

Knowlage Domain

" + data.data.domain + "

Keywords

" + data.data.keywords + "

Authors

" + data.data.authors + "

") .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(); }