如何在折線圖中顯示最新值

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

以下是訪問綁定到line元素的數據的方法： 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邏輯。