UPDATE:
Got a working jsFiddle here:
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) + ")";});
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) + ")";
}
);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.