Question

使用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");
}

以下是我的mousedown事件处理程序的相关部分，用于更新数据集并重绘图形：

.on("mousedown", function() {

        if (dataChoose == data) {
            dataChoose = data2;
        }

        else {
        dataChoose = data;
        }

        redraw(dataChoose);
        redrawText(dataChoose);
    });

这是我的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");
}

Answer 1

如果没有完整的示例，很难确切地看到您正在做什么，但看起来如果文本标签是数据的属性，您可能无法正确获取标签字段。

以下是我认为您所描述的行为的一个简单示例:( LINK）：http://tributary.io/inlet/9064381

var svg = d3.select('svg');

var data = [{"tag":"abc","val":123}]
    data2 = [{"tag":"ijk","val":321}]

var dataChoose = data;

var myBarGraph = svg.selectAll('rect')
    .data(dataChoose)
    .enter()
    .append('rect')
    .attr({
      x: 160,
      y: 135,
      height: 20,
      width: function(d) { return d.val; },
      fill: 'black'
    });

var updateBarGraph = function() {
    myBarGraph
    .data(dataChoose)
    .transition()
    .duration(1000)
    .attr('width', function(d) { return d.val; })
}

var myText = svg.append('text')
    .data(dataChoose)
    .attr('x', 129)
    .attr('y', 150)
    .attr('fill', '#000')
    .classed('dataChoose', true)
    .text(function(d) { return d.tag })

svg.on("click", function() {
        if (dataChoose == data) {
            dataChoose = data2;
        } else {
        dataChoose = data;
        }
        redrawText();
        updateBarGraph();
    });

function redrawText() {
    myText
    .data(dataChoose)
    .transition()
    .duration(1000)
    .style("opacity", 0)
    .transition().duration(500)
    .style("opacity", 1)
    .text(function(d) { return d.tag })
}

编辑：另一种可能是您的标签转换无效，因为您需要告诉d3如何进行文本转换（请参阅更新的redrawText）。

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

1 个答案: