javascript - 如何在折线图中显示最新值

Question

我无法访问 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

谢谢!

Answer 1

以下是访问绑定(bind)到行元素的数据的方法: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);

这是骗子:http://plnkr.co/edit/4HquzuJ6FJeZvEVWuUS5?p=preview

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