D3.js 将 tspan 附加到文本元素
D3.js append tspan to text element
我有一个 D3 条形图。当我将鼠标悬停在其中一个栏上时,会出现文本。
但我还希望显示另一行文字。为此,我需要附加一个 元素。
我看过示例,但无法让 附加到文本元素。
图表是 here, and full code on github。
附加 'text' 并附加 'tspan',
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');
JS函数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);
}
尝试以下操作:
追加:
t = g.append('text')
.attr('x', 9)
.attr('dy', '.35em');
ts = g.append('tspan')
.attr('x', 9)
.attr('dy', '.35em');
然后在 hanldeMouseOver 上:
ts.text("blah")
.attr("x", ...)
.attr("y", ...);
我是通过在函数中附加tspan得到的,
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);
}
其他地方没有tspan。
工作示例here
谢谢
我有一个 D3 条形图。当我将鼠标悬停在其中一个栏上时,会出现文本。
但我还希望显示另一行文字。为此,我需要附加一个
我看过示例,但无法让
图表是 here, and full code on github。
附加'text' 并附加 'tspan',
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');
JS函数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);
}
尝试以下操作:
追加:
t = g.append('text')
.attr('x', 9)
.attr('dy', '.35em');
ts = g.append('tspan')
.attr('x', 9)
.attr('dy', '.35em');
然后在 hanldeMouseOver 上:
ts.text("blah")
.attr("x", ...)
.attr("y", ...);
我是通过在函数中附加tspan得到的,
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);
}
其他地方没有tspan。
工作示例here
谢谢