chart1 = { const root = pack(tag_holder); const svg = d3.select(DOM.svg(width, height)) .style("display", "block") .style("margin", "0 -14px") .style("width", "calc(100% + 28px)") .style("height", "auto") .attr("font-size", 10) .attr("font-family", "sans-serif") .attr("text-anchor", "middle"); const tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("visibility", "hidden") .style("color", "white") .style("top", "0px") .style("padding", "8px") .style("background-color", "rgba(0,0,0,.8)") .style("border-radius", "6px") .style("text-align", "center") .style("font-family", "monospace") .style("max-width", "300px") .style("font-size", ".9rem"); const leaf = svg.selectAll("g") .style("font", "10px sans-serif") .attr("pointer-events", "none") .attr("text-anchor", "middle") .data(root.leaves()) .join("g") .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`) .style("fill-opacity", d => d.parent === root ? 1 : 0) .style("display", d => d.parent === root ? "inline" : "none") .text(d => d.data.name); leaf.append("circle") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .attr("r", d => d.r) .attr("fill-opacity", 0.7) .attr("fill", d => (d.data.value < 10) ? "#ffc6be" : (d.data.value < 25) ? "#ffa1c5" : (d.data.value < 50) ? "#a773c3" : (d.data.value < 75) ? "#854777" : "#aa000d"); leaf.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); leaf.append("text") .style("font", "10px sans-serif") .attr("clip-path", d => d.clipUid) .selectAll("tspan") .data(d => { return d.data.name.split(/(.*)/g); }) .style("fill-opacity", d => d.parent === root ? 1 : 0) .style("display", d => d.parent === root ? "inline" : "none") .text(d => d.data.name) .join("tspan") .attr("x", 0) .attr("y", (d, i, nodes) => `${i - nodes.length / 2 + .8}em`) .text(d => d) leaf.on("mouseover", function(){return tooltip.style("visibility", "visible");}) .on("mousemove", function(data){ tooltip.html("Tag Name: " + data.data.name + "
" + "Count: " + data.data.value + "
" + "Name of Projects with this Tag:

" + data.data.projects + ""); return tooltip.style("top", (d3.event.pageY+10)+"px").style("left",(d3.event.pageX+10)+"px") }) .on("mouseout", function(){return tooltip.style("visibility", "hidden");}); return svg.node(); }