Question

几乎得到它 - y轴和两条路径应该更新。文本值选择了问题，部分问题是选择，我选择了错误的方法。然后它并没有坚持y的变化，而是开始奔跑。

几乎有效的代码：

＆＃13;

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

＆＃13;

Answer 1

我终于让它工作并且同时有意义。包括工作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) + ")";});

d3 js - 用多行更新转换

1 个答案: