折线图中的D3.js从局部变量获取数据

// 假设数据存储在名为data的局部变量中
var data = [
  { date: "2022-01-01", value: 10 },
  { date: "2022-01-02", value: 20 },
  { date: "2022-01-03", value: 15 },
  // 更多数据...
];

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

// 创建比例尺
var xScale = d3.scaleTime()
  .domain(d3.extent(data, function(d) { return new Date(d.date); }))
  .range([0, 400]);

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return d.value; })])
  .range([250, 0]);

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

// 创建路径元素并绑定数据
svg.append("path")
  .datum(data)
  .attr("d", line)
  .attr("fill", "none")
  .attr("stroke", "steelblue")
  .attr("stroke-width", 2);