d3 js - 用多行更新转换

Question

几乎明白了 - y 轴和两条路径会按应有的方式更新。文本值不正确，部分问题是 selection，我 select 错误的方式。然后它不遵守 y 的变化，而是飞驰而去。

几乎可以工作的代码：

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

Answer 1

我终于让它工作并同时有意义。包括工作 jsFiddle。我认为这是一个很好的例子，因为据我所知，那里没有任何（可由 google 找到）工作示例。如果我能够研究这样的东西，我可能会节省几个小时...

我曾见过类似的问题，但没有得到真实、可靠的答案，所以希望这能给其他人一些指导。它看起来并不漂亮，但它演示了如何对多折线图的新数据和更新数据进行转换。

也就是说，jsFiddle

和一些代码（只有更新部分）。此示例包含一个新数据项和一个已更新的数据项。

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

d3 js - 用多行更新转换

d3 js - update transition with multiple lines

javascript

transition

linechart

d3.js