Scribd
Upload
38 views

Add A Hover Effect To A d3 Element

The document creates a bar chart using D3.js by appending rect elements from sample data to an SVG element, styling them with attributes like fill, x, y, width, and height. It also adds a "bar" class to the rect elements to apply CSS hover styling that changes the bar color on hover. Text elements showing the data values are also appended below each bar.

Uploaded by

ammouna beng
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
38 views

Add A Hover Effect To A d3 Element

The document creates a bar chart using D3.js by appending rect elements from sample data to an SVG element, styling them with attributes like fill, x, y, width, and height. It also adds a "bar" class to the rect elements to apply CSS hover styling that changes the bar color on hover. Text elements showing the data values are also appended below each bar.

Uploaded by

ammouna beng
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

<style>

.bar:hover {
fill: brown;
}
</style>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

const w = 500;
const h = 150;

const svg = d3.select("body")


.append("svg")
.attr("width", w)
.attr("height", h);

svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => h - 3 * d)
.attr("width", 25)
.attr("height", (d, i) => 3 * d)
.attr("fill", "navy")
// Add your code below this line
.attr("class","bar")

// Add your code above this line

svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text((d) => d)
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => h - (3 * d) - 3);

</script>
</body>

You might also like