chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width + 200, height + 50]); svg.append("g") .attr("fill", "orange") .selectAll("rect") .data(data) .join("rect") .attr("x", x(0)) .attr("y", (d, i) => y(i)) .attr("width", d => x(d.value) - x(0)) .attr("height", y.bandwidth()); svg.append("g") .attr("fill", "white") .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", 16) .selectAll("text") .data(data) .join("text") .attr("x", d => x(d.value)) .attr("y", (d, i) => y(i) + y.bandwidth() / 2) .attr("dy", "0.35em") .attr("dx", -4) .text(d => format(d.value)) .call(text => text.filter(d => x(d.value) - x(0) < 20) // short bars .attr("dx", +4) .attr("fill", "black") .attr("text-anchor", "start")) .on("mouseover", function(d) { d3.select(this).attr("fill", "magenta"); //Get this bar's x/y values, then augment for the tooltip //Get this bar's x/y values, then augment for the tooltip var yPosition = parseFloat(d3.select(this).attr("y")) + y.bandwidth() / 2; var xPosition = parseFloat(d3.select(this).attr("x")) / 2 + width / 2; tooltip .html( `

Name: ${d.name}

Proportion: ${d.name_1}%

Catgeory: ${d.name_2}

` ) .style('visibility', 'visible'); //Update the tooltip position and value //d3.select("#tooltip") // .style("left", xPosition + "px") // .style("top", yPosition + "px") // .select("#value") // .text(d.violation); //Show the tooltip //d3.select("#tooltip").classed("hidden", false); }) .on('mousemove', function () { tooltip .style('top', d3.event.pageY - 10 + 'px') .style('left', d3.event.pageX + 10 + 'px'); }) .on('mouseout', function () { tooltip.html(``).style('visibility', 'hidden'); d3.select(this).transition().attr('fill', "white"); }); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }