D3 - 将数组映射到柱状图

要使用D3将数组映射到柱状图，可以按照以下步骤进行操作：

1. 导入D3库和其他必要的依赖项：

import * as d3 from 'd3';

2. 创建画布和绘图区域：

const svg = d3.select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height);

const margin = { top: 20, right: 20, bottom: 30, left: 40 };
const chartWidth = width - margin.left - margin.right;
const chartHeight = height - margin.top - margin.bottom;

const chart = svg.append('g')
  .attr('transform', `translate(${margin.left}, ${margin.top})`);

3. 创建比例尺以将输入数组的值映射到图表区域的高度：

const yScale = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([chartHeight, 0]);

4. 创建x轴和y轴的比例尺：

const xScale = d3.scaleBand()
  .domain(data.map((d, i) => i))
  .range([0, chartWidth])
  .padding(0.1);

const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);

5. 创建柱状图的矩形元素：

chart.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', (d, i) => xScale(i))
  .attr('y', d => yScale(d))
  .attr('width', xScale.bandwidth())
  .attr('height', d => chartHeight - yScale(d))
  .attr('fill', 'steelblue');

6. 添加x轴和y轴到图表中：

chart.append('g')
  .attr('transform', `translate(0, ${chartHeight})`)
  .call(xAxis);

chart.append('g')
  .call(yAxis);

完整的示例代码如下所示：

import * as d3 from 'd3';

const data = [10, 20, 30, 40, 50];

const width = 400;
const height = 300;

const svg = d3.select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height);

const margin = { top: 20, right: 20, bottom: 30, left: 40 };
const chartWidth = width - margin.left - margin.right;
const chartHeight = height - margin.top - margin.bottom;

const chart = svg.append('g')
  .attr('transform', `translate(${margin.left}, ${margin.top})`);

const yScale = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([chartHeight, 0]);

const xScale = d3.scaleBand()
  .domain(data.map((d, i) => i))
  .range([0, chartWidth])
  .padding(0.1);

const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);

chart.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', (d, i) => xScale(i))
  .attr('y', d => yScale(d))
  .attr('width', xScale.bandwidth())
  .attr('height', d => chartHeight - yScale(d))
  .attr('fill', 'steelblue');

chart.append('g')
  .attr('transform', `translate(0, ${chartHeight})`)
  .call(xAxis);

chart.append('g')
  .call(yAxis);

这将创建一个基本的柱状图，其中数组data的值被映射到图表区域的高度。请根据需要进行修改和调整。