css图表:如何为d3图表设置多个d3属性

// 导入d3库
import * as d3 from 'd3';

// 创建图表容器
const chartContainer = d3.select('#chart-container');

// 设置图表大小
const chartWidth = 500;
const chartHeight = 300;
chartContainer.attr('width', chartWidth)
  .attr('height', chartHeight);

// 设置样式
chartContainer.style('background-color', 'lightgray');

// 创建x轴和y轴
const xScale = d3.scaleLinear()
  .domain([0, 100])
  .range([0, chartWidth]);

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

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

// 添加坐标轴
chartContainer.append('g')
  .attr('transform', `translate(0, ${chartHeight})`)
  .call(xAxis);

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

// 设置数据绑定和图表元素
const data = [20, 40, 60, 80, 100];

chartContainer.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', (d, i) => i * 50)
  .attr('y', d => chartHeight - d)
  .attr('width', 40)
  .attr('height', d => d)
  .style('fill', 'steelblue');

// 设置过渡效果
chartContainer.selectAll('rect')
  .transition()
  .duration(1000)
  .attr('width', 30)
  .attr('fill', 'orange');