d3js-使用多行更新转换

d3 js - update transition with multiple lines

本文关键字：更新 转换 d3js-      更新时间：2023-09-26

几乎得到了它-y轴和两条路径会按照应有的方式更新。文本值没有，部分问题在于选择，我选择了错误的方式。然后它就不遵守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);

我终于让它工作起来了，同时也变得有意义了。包括工作jsFiddle。我认为这是一个很好的例子，因为据我所知，没有任何（谷歌可以找到的）工作例子。如果我能学习这样的东西，我可能会节省几个小时。。。

我看到过类似的问题，但没有得到真实、可靠的答案，所以这应该会给其他人一些启示。它看起来并不好看，但它演示了如何使用多折线图的新数据和更新数据进行转换。

也就是说，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) + ")";});
相关文章：