[英]Text not displaying in D3 SVG
I have a problem with appending text to my SVG in d3. 我在d3中将文本附加到我的SVG时遇到问题。 What I want to achieve is for text to appear in the red circle as displayed in this image: Circle d3 graph .
我要实现的是使文本显示在该图像中显示的红色圆圈中: Circle d3 graph 。
For some reason I cannot make the text display and after spending a few hours on this I really don't have any ideas how to solve this... I found a few similar questions on SO but nothing helped me to solve this... 由于某种原因,我无法显示文本,并且花了几个小时后,我真的对解决这个问题一无所知。我在SO上发现了一些类似的问题,但没有任何帮助解决此问题...
Here are the fragments of the code that I think are crucial to solve this problem: 以下是我认为对解决此问题至关重要的代码片段:
.on("mousemove", function (d) {
svg.select("text.text-tooltip1")
.text(function(d){
return d3.time.format("%B %d, %Y")(d["data"]);
})
svg.select("text.text-tooltip2")
.text(function(d){
return "PM emmision:" + d3.round(x(d["ug_mean"]),2);
})
svg.select("text.text-tooltip3")
.text(function(d){
return "Benzen emmision:" + d3.round(x(d["Precipitationmm"]),2);
})
})
and 和
svg.append("circle")
.attr("class", "exp")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 130)
.attr("fill", "#e74747")
.attr("opacity", "0.8");
svg.append("text")
.attr("class", "text-tooltip1")
.attr("dy", "-2em")
.style("text-anchor", "middle")
.attr("class", "data");
svg.append("text")
.attr("class", "text-tooltip2")
.attr("dy", "1.5em")
.style("text-anchor", "middle")
.attr("class", "data");
svg.append("text")
.attr("z-index", 100)
.attr("class", "text-tooltip3")
.attr("dy", "2.5em")
.style("text-anchor", "middle")
.attr("class", "data");
And here is full code on Plunkr: https://plnkr.co/edit/b6PjicI0vOoYSHaDnWS0?p=preview 这是有关Plunkr的完整代码: https ://plnkr.co/edit/b6PjicI0vOoYSHaDnWS0 ? p = preview
Thanks a lot for your help! 非常感谢你的帮助!
You need to make two small changes. 您需要进行两个小更改。 First, when you append the
<text>
elements, you are setting class
twice. 首先,当您添加
<text>
元素时,您需要两次设置class
。 But the second time overwrites the first, so those elements don't have the .text-tooltipN
class you expect them to have. 但是第二次覆盖第一次,因此这些元素没有您期望它们具有的
.text-tooltipN
类。 In D3 v4, you can use .classed('class-name', true)
multiple times without overwriting other classes, but it's easier to just set all at once: 在D3 v4中,您可以
.classed('class-name', true)
使用.classed('class-name', true)
而不覆盖其他类,但是一次全部设置更容易:
svg.append("text")
.attr("class", "data text-tooltip1")
.attr("dy", "-2em")
.style("text-anchor", "middle");
Second, you don't need two functions inside the mouse event -- notice that you're nesting two cases of function(d){}
which means d
no longer has the value you want: 其次,在鼠标事件内部不需要两个函数-请注意,您嵌套的是两个
function(d){}
实例,这意味着d
不再具有所需的值:
.on("mousemove", function (d) {
svg.select("text.text-tooltip1")
.text(d3.time.format("%B %d, %Y")(d["data"]))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.