在d3中,我如何在我的折线图上滚动文本和背景框?
问题描述:
我正在使用d3 v4。我想显示一些文字,对应于人们将鼠标悬停在我的折线图上,我希望在此文本上有一个背景框。所以我想这个在d3中,我如何在我的折线图上滚动文本和背景框?
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Value");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
var focus = svg.append("g")
.attr("class", "focus")
.style("display", "none");
focus.append("circle")
.attr("r", 4.5);
var rect = focus.append("rect")
.attr("x", 9)
.attr("dy", ".35em")
.attr("width", 50)
.attr("height", 50)
.attr("fill", "yellow");
...
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) + ")");
rect.select("text").text(formatCurrency(d.value));
}
,但所发生的事情,而不是在那里只是没有任何文字的漂浮在我的鼠标悬停点,你可以在这里看到一个长方形 - https://jsfiddle.net/xx77tzn3/9/。如何调整我必须包含的文本和背景框?
答
<svg>
(相当不直观)不允许您将text
元素附加到rect
元素。取消注释
//var text = focus.append("text")
,并注释:
var text = rect.append("text")
然后鼠标功能,变线113这样的:
focus.select("text").text(formatCurrency(d.value));
然后,它只是一个对<g>
格式化文本的事。
编辑:为了格式的文本是上的rect
,你需要做文本相对的坐标为<g>
,而不是rect
。即:
var text = focus.append("text")
//var text = rect.append("text")
.attr("x", 10)
.attr("y", 10);
现在的文本是存在的,在矩形的顶部和。
是的,但后来我没有我的文字背景。我想要我的蛋糕,我想吃。嗯,蛋糕。 – Dave
@但你这样做,但文字不在其上。这就像蛋糕从盘子上掉下来(T-T) –
哈哈,有什么方法可以保留在那里? – Dave