我正在使用d3 v4。当有人悬停在我的折线图上时,我希望有一个框显示有关他们正在悬停的图表点的信息,因此我包含了以下内容:
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() {
focus.style("display", null);
})
.on("mouseout", function() {
focus.style("display", "none");
})
.on("mousemove", mousemove);
function mousemove() {
var x0 = x.invert(d3.mouse(this)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.date > d1.date - x0 ? d1 : d0;
focus.attr("transform", "translate(" + x(d.index_date) + "," + y(d.value) + ")");
focus.select("text").text(d.value).append("tspan")
.attr("x", 10).attr("dy", "1.5em").text(formatDate(d.index_date));
var bbox = focus.select("text").node().getBBox();
rect.attr("width", bbox.width + 4).attr("height", bbox.height + 4);
}
问题是,当你在我的折线图的右侧移动时,信息开始被截断 -- https://jsfiddle.net/rgw12x8d/2/ 。我应该如何调整内容,以便即使你在最右边滚动到一个点上,信息框也能完全可见?