使用d3,我创建了一个条形图,显示其上每个条形的文本值.我通过按钮上的单击事件在两个不同的数据集之间切换.数据集在mousedown上成功更改,即条形图的大小会发生变化,但我无法更改条形图上的文本标签.我的redrawText函数没有做任何事情,再次调用我的drawText函数只是重绘上一个标签之上的数据(正如人们所期望的那样).我正在寻找一种方法来删除旧标签并重新绘制反映我的removeText函数中的新数据的标签.
这是我的drawText函数,最初调用它来创建标签.'datachoose'是选择用于绘制正确数据集图形的变量的名称.
function drawText(dataChoose) {
new_svg.selectAll("text.dataChoose")
.data(dataChoose)
.enter().append("text")
.text(function(d) {
return d;
})
/* removed some transform code */
.attr("fill", "white")
.attr("style", "font-size: 12; font-family: Garamond, sans-serif");
}
Run Code Online (Sandbox Code Playgroud)
以下是我的mousedown事件处理程序的相关部分,用于更新数据集并重绘图形:
.on("mousedown", function() {
if (dataChoose == data) {
dataChoose = data2;
}
else {
dataChoose = data;
}
redraw(dataChoose);
redrawText(dataChoose);
});
Run Code Online (Sandbox Code Playgroud)
这是我的redrawText()函数
function redrawText(dataChoose) {
var new_text = new_svg.selectAll("text.dataChoose")
.data(dataChoose);
new_text.transition()
.duration(1000)
.text(function(d) {
return d;
})
/* removed transform code */
.attr("fill", "white")
.attr("style", "font-size: 16; font-family: Garamond, sans-serif");
}
Run Code Online (Sandbox Code Playgroud)