d3js-更新多折线图中的文本元素时出现问题

d3 js - trouble updating text elements in multiple line chart

本文关键字：元素 问题 文本 更新 折线图 d3js-      更新时间：2023-09-26

更新：

这里有一个正在工作的jsFiddle：

Fiddle

在这之后，我把这个片段移到了最后，让它开始工作，但我很难理解为什么——我怀疑这不是一个进行转换和更新的好方法。非常感谢您的帮助。

text.datum(function(d) {return { name: d.name, value: d.values[d.values.length - 1]}; })
    .transition()
    .duration(750)
    .attr("transform", function(d) {return "translate(" + x(d.value.Datum) + "," + y(d.value.Antal) + ")";});

有另一个问题，不是关于图表的文本部分，而是关于线条，在这里回答：问题

在我解决行的同时，我还解决了如何更改文本。就像上面的问题一样。

var t01 = svg.selectAll(".city")
             .data(dsMainArr,function key(d) {return d.name;});

var t01Enter =  t01.enter().append("g")
                           .attr("class", "city");
t01Enter.append("text")
        .attr("class", "textEnd")
        .datum(function(d) {return {name: d.name, value: d.values[d.values.length - 1]}; })
        .attr("transform", function(d) { return "translate(" + x(d.value.Datum) + "," + y(d.value.Antal) + ")";         })
        .attr("x", 3)
        .attr("dy", ".35em")
        .text(function(d) { return d.name; })
        .transition().duration(750);
t01.exit().transition().duration(750).remove();
var t1 = t01.transition();
t1.select("text").attr("transform",
                       function(d) { var len = d.values.length;
                                     return "translate(" + x(d.values[len-1].Datum) 
                                     + "," 
                                     + y(d.values[len-1].Antal) + ")";
                       }
                 );
相关文章：