小编Ela*_*e B的帖子

d3 - 更新数据时更改文本标签

使用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)

javascript d3.js

7
推荐指数
1
解决办法
2万
查看次数

标签 统计

d3.js ×1

javascript ×1