如何在折线图中显示最近的值

How to display most recent value in line chart

本文关键字：最近 显示 折线图      更新时间：2023-09-26

我在访问CSV的最后一个值（行）以在折线图中悬停显示时遇到问题。我需要将该值显示为文本，但也要用作Y坐标以与行的末尾对齐。这就是我所拥有的。第一部分有效，但第二部分无效（介于///之间）：

function mouseover(d) {
d3.select(d.corporation.line).classed("corporation--hover", true);
d.corporation.line.parentNode.appendChild(d.corporation.line);
focus.attr("transform", "translate(" + x(d.date) + "," + y(d.value) + ")");
focus.select(".corpname").text(d.corporation.name);
focus.select(".ranking").text(d.value);
/////
focus.append("text")
.datum(function(d) { return {name: d.corporation.name, value: d.corporation.value[d.corporation.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.values) + ")"; })
.text(function(d) { return d.value; });
/////
}

我尝试了几种不同的变体，但都没有成功。如果有人能登上顶峰，我会很高兴。

PLUNK在这里：http://plnkr.co/edit/1Nf992jYjSGyKhLhaij5?p=preview

谢谢！

以下是如何访问绑定到行元素的数据：this.__data__

首先，让我们创建一个变量来访问数据，特别是值数组：

var that = this.__data__.corporation.values;

然后，我们可以得到日期和行末尾的值：

var thatLength = that.length;
var thatValue = that[thatLength - 1].value;
var thatDate = that[thatLength - 1].date;

并显示文本：

someLegend
.attr("x", (x(yearFormat(thatDate))*-1)-90)
.attr("y", y(thatValue))
.text(thatValue);

以下是plunker：http://plnkr.co/edit/4HquzuJ6FJeZvEVWuUS5?p=preview

PS：我创建这个变量someLegend是因为我没有时间理解focus的translate逻辑。

相关文章：