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

Question

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

7

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

- Elaine B

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Greg Jennings · Accepted Answer

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

这里有一个简单的示例，我认为这就是你所描述的期望行为: (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）。