d3绘制两个系列的柱形图

在D3.js中，绘制两个系列的柱状图通常涉及到创建两个数据集，并分别绑定到SVG元素上，然后为每个系列生成独立的条形。下面是一个简单的步骤概述：

1. **导入D3库**：

   var d3 = require('d3');

2. **加载数据**：

   var datasetA = [/* 数据点A */];
   var datasetB = [/* 数据点B */];

3. **选择容器并设置尺寸**：

   var svgWidth = 800;
   var svgHeight = 400;
   var margin = {top: 50, right: 50, bottom: 50, left: 50};
   var width = svgWidth - margin.left - margin.right;
   var height = svgHeight - margin.top - margin.bottom;

   var svg = d3.select('body')
             .append('svg')
             .attr('width', svgWidth)
             .attr('height', svgHeight);

4. **创建x轴和y轴**：

   var xScale = d3.scaleBand()
                   .domain(d3.range(datasetA.length))
                   .range([margin.left, width])
                   .padding(0.1);

   var yScale = d3.scaleLinear()
                   .domain([0, d3.max([datasetA.map(d => d.value), datasetB.map(d => d.value)])])
                   .range([height, 0]);

   svg.append('g')
      .attr('transform', 'translate(0,' + height + ')')
      .call(d3.axisBottom(xScale));
   svg.append('g')
      .call(d3.axisLeft(yScale));

5. **绘制第一个系列**：

   var barsA = svg.selectAll('.barA')
                  .data(datasetA)
                  .enter().append('rect')
                  .attr('class', 'barA')
                  .attr('x', function(d, i) { return xScale(i); })
                  .attr('y', function(d) { return yScale(d.value); })
                  .attr('width', xScale.bandwidth())
                  .attr('height', function(d) { return height - yScale(d.value); });

6. **绘制第二个系列**：

   var barsB = svg.selectAll('.barB')
                  .data(datasetB)
                  .enter().append('rect')
                  .attr('class', 'barB')
                  .attr('x', function(d, i) { return xScale(i) + xScale.bandwidth(); })
                  .attr('y', function(d) { return yScale(d.value); })
                  .attr('width', xScale.bandwidth())
                  .attr('height', function(d) { return height - yScale(d.value); });

7. **添加交互和样式**：
根据需要添加鼠标悬停、点击事件，以及调整颜色、填充等视觉效果。