d3 js - 无法更新多折线图中的文本元素

时间:2015-12-10 13:07:08

标签: javascript d3.js linechart

更新:

在这里找到了一个有效的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) + ")";});

1 个答案:

答案 0 :(得分:0)

还有另一个问题没有处理图表的文字部分而是处理线条,在这里回答: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) + ")";
                       }
                 );