足球比赛跟踪器：用交互式图表追踪每场球赛的进展
来源：24直播网
【直播信号】
<link href="style.css" rel="stylesheet"/>
用交互式图表追踪每场球赛的进展。
javascript // 数据 const data = [{team: "主队",goals: [1, 2, 3],shots: [5, 7, 9],possession: [50, 52, 54],},{team: "客队",goals: [0, 1, 2],shots: [3, 5, 7],possession: [50, 48, 46],}, ];// 图表大小 const width = 800; const height = 600;// 设置图表 const svg = d3.select("chart").append("svg").attr("width", width).attr("height", height);// 设置刻度 const xScale = d3.scaleLinear().domain([0, data.length - 1]).range([0, width]);const yScale = d3.scaleLinear().domain([0, d3.max(data, d => d3.max(d.goals))]).range([height, 0]);// 添加折线图 svg.selectAll("path").data(data).enter().append("path").attr("d", d => `M${xScale(0)},${yScale(d.goals[0])}L${xScale(1)},${yScale(d.goals[1])}L${xScale(2)},${yScale(d.goals[2])}`).attr("stroke", "blue").attr("fill", "none");// 添加圆点 svg.selectAll("circle").data(data).enter().append("circle").attr("cx", d => xScale(d.goals.length - 1)).attr("cy", d => yScale(d.goals[d.goals.length - 1])).attr("r", 5).attr("fill", "blue");// 添加刻度轴 svg.append("g").attr("transform", `translate(0, ${height})`).call(d3.axisBottom(xScale));svg.append("g").attr("transform", "translate(0, 0)").call(d3.axisLeft(yScale));// 添加图例 const legend = svg.append("g").attr("transform", `translate(${width - 100}, 0)`);legend.append("rect").attr("width", 10).attr("height", 10).attr("fill", "blue");legend.append("text").attr("x", 15).attr("y", 10).text("进球");
