d3 js-在更新多个折线图中的文本元素时遇到麻烦

Question

UPDATE:

Got a working jsFiddle here:

Fiddle

I have gotten it to work after this, by moving this snippet last but I have a hard time understanding why - and I suspect this isn't a good way to do transitions and update. Any help is much appreciated.

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

Answer 1

Had another question that didn't deal with the text part of the chart but rather the lines, answered here: Question

At the same time I solved the lines I also solved how to change the text. Like in the above question.

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