带有Codepen表示的原始帖子：Creating Interactive Charts with D3.js
d3（数据驱动文档的缩写）是一个JavaScript库，可让您为Web创建交互式数据可视化。使用D3，您可以创建各种可视化范围，从简单的图表和图形到复杂的交互式图形。
在本教程中，我们将研究如何使用D3创建简单的条形图。我们将从基本的条形图开始，然后通过更新图表数据并在用户徘徊在栏上时的标签来添加交互。
。首先，让我们为图表设置HTML。我们将包含一个带有“图表”的ID的DIV元素，以及一个脚本标签，其中包括D3库：
<html>
<head>
<script src="https://d3js.org/d3.v6.min.js"></script>
<style>
body {
overflow: scroll;
}
#chart {
display: grid;
grid-template-columns: 1fr;
height: 100vh;
width: 100vw;
justify-items: center;
align-items: center;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
<!-- the chart logic goes here! -->
</script>
</body>
</html>
接下来，让我们为图表定义数据。我们将使用一系列对象，每个对象代表图表中的条形。每个对象都应具有名称和值属性：
const data = [
{ name: 'Alice', value: 100 },
{ name: 'Bob', value: 75 },
{ name: 'Eve', value: 50 },
{ name: 'Mike', value: 0 }
];
现在，让我们设置将包含我们图表的SVG元素。我们将指定图表的宽度和高度以及条之间的填充。我们还将定义X轴的比例，该量表将确定每个条的宽度：
const height = 300;
const barPadding = 10;
const barWidth = 30;
const xScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)]) //from 0 to the greatest value (100)
.range([0, width]); // make the width of the svg fit the chart
const yScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.range([height, 0]);
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);
const svg = d3
.select('#chart')
.append('svg')
.attr('width', width+35)// add 35 to fit the xAxis
.attr('height', height+35) // add 35 to fit the yAxis
现在，让我们为我们的图表创建标准。我们将使用rect元素来创建条形，并使用数据功能将数据绑定到它们。我们还将指定条形的X和Y位置以及它们的宽度和高度：
svg
.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('x', (d, i) => i * (barWidth + barPadding))
.attr('y', (d) => yScale(d.value))
.attr('width', barWidth)
.attr('height', (d) => height - yScale(d.value))
.attr('fill', '#2196f3')
接下来，让我们将交互性添加到我们的图表中。我们将在酒吧中添加鼠标和鼠标局事件，并在用户徘徊在栏上时更新图表数据和标签。
.on('mouseover', function(d, i) { // Add a mouseover event to the bars
d3.select(this).style('opacity', 0.5);// change opacity
svg
.selectAll('text')
.filter((d, j) => d===i)// select the text related to the bar
.text(i.name); // Change the text from value to name
})
.on('mouseout', function(d, i) { // Add a mouseout event to the bars
// reverse everything
d3.select(this).style('opacity', 1);
svg
.selectAll('text')
.filter((d, j) => d===i)
.text(i.value);
})
.attr('transform', `translate(25, 10)`)
现在，让我们为我们的图表添加标签。我们将使用文本元素来创建标签，并使用数据功能将数据绑定到它们。我们还将指定标签的X和Y位置：
svg
.selectAll('text')
.data(data)
.enter()
.append('text')
.text((d) => d.value)
.attr('x', (d, i) => i * (barWidth + barPadding) + barWidth / 2)
.attr('y', (d) => yScale(d.value) )
.attr('text-anchor', 'middle')
.attr('font-size', '14px')
.attr('fill', 'black')
.on('mouseover', function(d, i) { // Add a mouseover event to the text
// this: refers to the text. this.parentNode: refers to the whole SVG
d3.select(this).text(i.name); // change text from value to name
})
.on('mouseout', function(d, i) { // Add a mouseout event to the text
d3.select(this).text(i.value);
})
.attr('transform', `translate(25, 10)`)
最后，让我们将X和Y轴添加到我们的图表中。我们将使用G元素将X和Y轴分组，并将调用功能渲染：
svg
.append('g')
.attr('transform', `translate(25, ${height+10})`)
.call(xAxis);
svg
.append('g')
.attr('transform', `translate(25, 10)`)
.call(yAxis);
就是这样！现在，您使用D3.js。
值得注意的是，那里有许多库可以为您创建图表和图形，例如Chart.js，HighCharts和Google图表。但是，D3.js提供了很多灵活性和自定义选项，使您可以精确地创建Web应用程序所需的图表。
我希望本教程能帮助您开始使用D3.js创建交互式图表。与往常一样，如果您有任何疑问或需要进一步的指导，请不要犹豫。愉快的编码！