d3 js - update transition with multiple lines

问题

Almost got it - the y-axis and the two paths update as they should. The text value dosen't and part of the problem is the selection, i select the wrong way. And then it doesn't adhere to the changes in y but instead goes galloping off.

Code that almost work:

// First transition the line & label to the new city.
var t0 = level.data(dsMainArr).transition().duration(750);


t0.selectAll(".line")
  .attr("d", function(d) {
    return line(d.values);
  })
  .style("stroke", function(d) {
    return color(d.name);
  });

var t00 = level.selectAll('.textEnd')
  .data(dsMainArr)
  .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) + ")";
  })
  .text(function(d) {
    return d.name;
  });

// Then transition the y-axis.
y.domain([0,
  d3.max(dsMainArr, function(c) {
    console.log("max", d3.max(c.values, function(v) {
      return v.Antal;
    }));
    return d3.max(c.values, function(v) {
      return v.Antal;
    });
  })
]);

var t1 = t0.transition();
var t11 = t00.transition();
console.log("sista", t11);
t1.select(".line").attr("d", function(d) {
  return line(d.values);
})
t11.selectAll(".textEnd").attr("transform", function(d) {
  return "translate(" + x(d.value.Datum) + "," + y(d.value.Antal) + ")";
})
svg.transition().duration(750).transition().selectAll(".y.axis").call(yAxis);

回答1:

I finally got it to work and make sense at the same time. Working jsFiddle included. I think this is a good example for as far as I know there aren't any (findable by google) working examples out there. Had I been able to study something like this I might have saved hours upon hours...

I have seen similar questions without getting real, solid answers so this should hopefully give others out there some pointers. It ain't pretty to look at but it demonstrates how to do transitions with both new and updated data for a multiple-line-chart.

That said, jsFiddle

And some code (only the update part). This example is with one new data item and one that is updated.

// First transition the line & label to the filtered data.
var t01 = svg.selectAll(".city")
             .data(dsMainArr,function key(d) {return d.name;});



var t01Enter =  t01.enter().append("g")
                           .attr("class", "city");

t01Enter.append("path")
        .attr("class", "line")
        .attr("d", function(d) {return line(d.values); })
        .style("stroke", function(d) { return color(d.name); })
        .transition().duration(750);

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();

// Then transition the y-axis.
y.domain([
d3.min(dsMainArr, function(c) { return d3.min(c.values, function(v) { return v.Antal; }); }),
d3.max(dsMainArr, function(c) { return d3.max(c.values, function(v) { return v.Antal; }); })]);

var t1 = t01.transition();

svg.transition().duration(750).transition().selectAll(".y.axis").call(yAxis);
t1.select(".line").attr("d", function(d) {return line(d.values); });
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) + ")";});

来源：https://stackoverflow.com/questions/33646956/d3-js-update-transition-with-multiple-lines