具有多个比例/Y轴的图表

// 引入D3.js库
<script src="https://d3js.org/d3.v7.min.js"></script>

// 数据集
const data = [
  { date: '2023-01-01', value1: 100, value2: 5000 },
  { date: '2023-01-02', value1: 150, value2: 4500 },
  // ...更多数据
];

// 设置SVG容器
const svg = d3.select('svg');
const width = +svg.attr('width');
const height = +svg.attr('height');

// 创建比例尺
const x = d3.scaleTime()
  .domain(d3.extent(data, d => new Date(d.date)))
  .range([50, width - 50]);

const y1 = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.value1)])
  .range([height - 50, 50]);

const y2 = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.value2)])
  .range([height - 50, 50]);

// 创建轴
const xAxis = d3.axisBottom(x);
const yAxis1 = d3.axisLeft(y1);
const yAxis2 = d3.axisRight(y2);

// 添加轴到SVG
svg.append('g')
  .attr('transform', `translate(0,${height - 50})`)
  .call(xAxis);

svg.append('g')
  .attr('transform', 'translate(50,0)')
  .call(yAxis1);

svg.append('g')
  .attr('transform', `translate(${width - 50},0)`)
  .call(yAxis2);

// 绘制数据线
const line1 = d3.line()
  .x(d => x(new Date(d.date)))
  .y(d => y1(d.value1));

const line2 = d3.line()
  .x(d => x(new Date(d.date)))
  .y(d => y2(d.value2));

svg.append('path')
  .datum(data)
  .attr('fill', 'none')
  .attr('stroke', 'steelblue')
  .attr('stroke-width', 1.5)
  .attr('d', line1);

svg.append('path')
  .datum(data)
  .attr('fill', 'none')
  .attr('stroke', 'orange')
  .attr('stroke-width', 1.5)
  .attr('d', line2);