D3:如何在折线图中显示孤点

// 数据集
var dataset = [
  { x: 1, y: 5, isOutlier: false },
  { x: 2, y: 10, isOutlier: true },
  { x: 3, y: 8, isOutlier: false },
  { x: 4, y: 6, isOutlier: false },
  { x: 5, y: 12, isOutlier: true },
  { x: 6, y: 9, isOutlier: false }
];

// SVG容器尺寸
var width = 400;
var height = 300;

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

// 定义比例尺
var xScale = d3.scaleLinear()
  .domain([1, 6])
  .range([0, width]);

var yScale = d3.scaleLinear()
  .domain([0, 15])
  .range([height, 0]);

// 创建折线生成器
var line = d3.line()
  .x(function(d) { return xScale(d.x); })
  .y(function(d) { return yScale(d.y); });

// 绘制折线图
svg.append("path")
  .datum(dataset)
  .attr("class", "line")
  .attr("d", line);

// 显示孤点
svg.selectAll("circle")
  .data(dataset)
  .enter()
  .append("circle")
  .filter(function(d) { return d.isOutlier; })
  .attr("cx", function(d) { return xScale(d.x); })
  .attr("cy", function(d) { return yScale(d.y); })
  .attr("r", 5)
  .attr("fill", "red");