admin管理员组文章数量:1330389
I have a D3 bar chart. When I mouseover of one of the bars, text appears.
But I would like another line of text to also appear. For this I need to append a <tspan> element.
I have seen examples, but can't get <tspan> to append to the text element.
The Graph is here, and full code on github.
'text' is appended and 'tspan' is appended to that,
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.style("fill", function(d) {
return colorScale(d.intensity);
})
.attr("class", "bar")
.attr("x", function(d) {
return x(d.date);
})
.attr("y", function(d) {
return y(d.distance);
})
// .attr("width", x.bandwidth())
.attr("width", function(d) {
return dur(d.duration);
})
// .attr("width", 6)
.attr("height", function(d) {
return height - y(d.distance);
})
.on("mouseover", handleMouseOver)
.on("mouseout", handleMouseOut);
t = g.append('text')
.attr('x', 9)
.attr('dy', '.35em');
ts = g.append('tspan')
.attr('x', 9)
.attr('dy', '.35em');
The JS function handleMouseOver
function handleMouseOver(d) {
d3.select(this)
.style("fill", "lightBlue")
g.select('text')
.attr("x", x(d.date) + dur(d.duration + 5))
.attr("y", y(d.distance) + 10)
.text(d.distance + "m");
ts.text("blah")
.attr("x", x(d.date) + dur(d.duration + 5))
.attr("y", y(d.distance) + 30);
}
I have a D3 bar chart. When I mouseover of one of the bars, text appears.
But I would like another line of text to also appear. For this I need to append a <tspan> element.
I have seen examples, but can't get <tspan> to append to the text element.
The Graph is here, and full code on github.
'text' is appended and 'tspan' is appended to that,
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.style("fill", function(d) {
return colorScale(d.intensity);
})
.attr("class", "bar")
.attr("x", function(d) {
return x(d.date);
})
.attr("y", function(d) {
return y(d.distance);
})
// .attr("width", x.bandwidth())
.attr("width", function(d) {
return dur(d.duration);
})
// .attr("width", 6)
.attr("height", function(d) {
return height - y(d.distance);
})
.on("mouseover", handleMouseOver)
.on("mouseout", handleMouseOut);
t = g.append('text')
.attr('x', 9)
.attr('dy', '.35em');
ts = g.append('tspan')
.attr('x', 9)
.attr('dy', '.35em');
The JS function handleMouseOver
function handleMouseOver(d) {
d3.select(this)
.style("fill", "lightBlue")
g.select('text')
.attr("x", x(d.date) + dur(d.duration + 5))
.attr("y", y(d.distance) + 10)
.text(d.distance + "m");
ts.text("blah")
.attr("x", x(d.date) + dur(d.duration + 5))
.attr("y", y(d.distance) + 30);
}
Share
Improve this question
edited Feb 13, 2017 at 23:40
ofey
asked Feb 13, 2017 at 23:11
ofeyofey
3,34710 gold badges50 silver badges93 bronze badges
1
-
Didn't see much online about how to nest
<tspan>
elements inside of<text>
with D3.JS, but clarified it for myself. [See this question](How to get out of nested selectAll in D3JS?). – Fabien Snauwaert Commented Feb 15, 2020 at 16:50
2 Answers
Reset to default 3Try the following:
To append:
t = g.append('text')
.attr('x', 9)
.attr('dy', '.35em');
ts = g.append('tspan')
.attr('x', 9)
.attr('dy', '.35em');
and then on the hanldeMouseOver:
ts.text("blah")
.attr("x", ...)
.attr("y", ...);
I got it by appending tspan in the function,
function handleMouseOver(d) {
d3.select(this)
.style("fill", "lightBlue")
g.select('text')
.attr("x", x(d.date) + dur(d.duration + 5))
.attr("y", y(d.distance) + 10)
.text(d.distance + "m")
.append('tspan')
.text(d.number)
.attr("x", x(d.date) + dur(d.duration + 5))
.attr("y", y(d.distance) + 30)
.append('tspan')
.text(d.date)
.attr("x", x(d.date) + dur(d.duration + 5))
.attr("y", y(d.distance) + 50);
}
There is no tspan elsewhere.
Working example here
Thanks
本文标签: javascriptD3js append tspan to text elementStack Overflow
版权声明:本文标题:javascript - D3.js append tspan to text element - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742268624a2443879.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论