Question

我正在尝试根据页面上的一些动态数据/用户输入更新图表。由于数据只是放在条形图列的基础上而不需要移动，我认为我不需要任何动画。只需删除当前文本并替换为新值即可。

下面的代码是我最好的猜测，但它似乎没有做到这一点。 .append()工作正常，但它只是将新文本叠加在旧文本上，最终变得不可读（显然）。好像是.remove()，我使用不当。

相对较新的D3.js所以，如果有更好的方式/任何人有任何提示/提示，他们将不胜感激。

根据评论编辑

        //Remove the old text
        this.options.barDemo.selectAll("text.eoyValue")
            .data(data)
            .exit().remove();

        //Replace with the new text           
        this.options.barDemo.selectAll("text.eoyValue")
            .data(data)
            .enter().append("svg:text")
            .attr("x", function(d, i) { return x(i + .35) + barWidth; })
            .attr("y", height - 10)
            .attr("dx", -barWidth / 2)
            .attr("dy", "15px")
            .attr("text-anchor", "middle")
            .attr("style", "font-size: 12; font-family; Helvetica, sans-serif")
            .text(function(d) {
                console.log(d.attributes.contract);
                return d.attributes.contract;
            })
            .attr("transform", "translate(0, 18)")
            .attr("class", "eoyValue");

Answer 1

因此，除了不添加类名之外，我还没有调用transition()方法。下面的代码解决了这个问题。

        this.options.barDemo.selectAll("text.eoyValue")
            .data(data)
            .enter().append("svg:text")
            .attr("x", function(d, i) { return x(i + .35) + barWidth; })
            .attr("y", height - 10)
            .attr("dx", -barWidth / 2)
            .attr("dy", "15px")
            .attr("text-anchor", "middle")
            .attr("style", "font-size: 12; font-family; Helvetica, sans-serif")
            .text(function(d) { return d.attributes.contract; })
            .attr("transform", "translate(0, 18)")
            .attr("class", "eoyValue");


        var columnBaseText = this.options.barDemo.selectAll("text.eoyValue").data(data, function (d, i) {
            console.log(i);
            return i;
        });

        columnBaseText.transition()
            .duration(1100)
            .attr("y", height-10)
            .text(function (d) {
                return d.attributes.contract;
            });

通过D3删除文本

1 个答案: