使用d3.group在D3中绘制成组线

// 准备数据
var data = [
  { type: 'A', start: [0, 0], end: [100, 100] },
  { type: 'A', start: [100, 100], end: [200, 200] },
  { type: 'B', start: [0, 100], end: [100, 0] },
  { type: 'B', start: [100, 0], end: [200, 100] }
];

// 使用d3.group进行分组
var groupedData = d3.group(data, d => d.type);

// 创建SVG容器
var svg = d3.select('body')
  .append('svg')
  .attr('width', 200)
  .attr('height', 200);

// 绘制线条
svg.selectAll('line')
  .data(groupedData)
  .enter()
  .append('line')
  .attr('x1', d => d[1][0].start[0])
  .attr('y1', d => d[1][0].start[1])
  .attr('x2', d => d[1][0].end[0])
  .attr('y2', d => d[1][0].end[1])
  .attr('stroke', 'black')
  .attr('stroke-width', 2);

// 添加交互效果
svg.selectAll('line')
  .on('mouseover', function() {
    d3.select(this)
      .attr('stroke', 'red');
  })
  .on('mouseout', function() {
    d3.select(this)
      .attr('stroke', 'black');
  });