如何找到 d3 中的最后一个数据点并在其上画一个圆和一条线？答案

【问题标题】：How do you find the last data point in d3 and draw a circle and a line on it?如何找到 d3 中的最后一个数据点并在其上画一个圆和一条线？
【发布时间】：2021-06-08 07:58:49
【问题描述】：

我在 d3 中有一个可以正确显示的基本折线图。我需要找到数据的最后一个入口点，并在上面画一个圆圈和一条虚线，如上图。

这是我当前的 d3 代码：

const xScale = scaleTime()
      .range([0, width])
      .domain(
        extent(data, (d: { week: any }) => {
          return d.week;
        })
      );

    const yScale = scaleLinear()
      .range([height, 0])
      .domain([
        min(data, (d: { index: number }) => {
          return d.index;
        }) - 20,
        max(data, (d: { index: number }) => {
          return d.index;
        }) + 20
      ]);

    const xAxis = axisBottom(xScale)
       .ticks(data.length);
    
    const svg = select(svgRef.current);

    svg
      .select(".x-axis")
      .style("transform", `translateY(${height}px)`)
      .call(xAxis);

    const yAxis = axisLeft(yScale);
    svg
      .select(".y-axis")
      .call(yAxis);

    const myLine = line()
      .x((d: { week: any }) => xScale(d.week))
      .y((d: { index: any }) => yScale(d.index))
      .curve(curveCardinal);

    svg
      .selectAll(".line")
      .data([data])
      .join("path")
      .attr("class", "data-circle")
      .attr("d", myLine)
      .attr("fill", "none")
      .attr("stroke", "purple")
      .attr("stroke-width", "5px");

      // draw circle here -- TODO
      svg
      .selectAll(".data-circle")
      .data([data])
      .append("circle")
      .attr("r", 7.5);

我试图在它周围选择合适的元素，它可以返回数组中的最终条目，但我不断收到错误，我不确定它是否只是一个简单的更改。

圆圈不必在鼠标悬停上，而是默认绘制。如果加载不同的数据会自动调整。

【问题讨论】：

标签： javascript typescript svg d3.js

【解决方案1】：

在每次更新时计算点坐标，如果已创建点则选择该点或创建一个新点：

const lastData = data[data.length-1];
const y = yScale(lastData.index));
const x = xScale(lastData.week));

let lastPoint = svg.select('.last-point');
let lastLine = svg.select('.last-line');
if (!lastPoint.node()) {
  lastPoint = svg.append('circle')
    .classed('last-point', true)
    .style('fill', 'purple')
    .attr('r', 7.5);
  lastLine = svg.append('line')
    .classed('last-line', true)
    .attr('stroke-dasharray', '5,5')
    .style('stroke', 'gray');
}

lastPoint
  .attr('cx', x)
  .attr('cy', y);

lastLine
  .attr('x1', x)
  .attr('x2', x)
  .attr('y1', y)
  .attr('y2', height);

【讨论】：