d3 v4折线图过渡不起作用

Question

我希望我的线条像这样的例子：

https://bl.ocks.org/shimizu/f7ef798894427a99efe5e173e003260d

下面的代码没有进行任何转换，只显示图表。

我知道浏览器缓存，这不是问题。 我也试过改变持续时间，这也无济于事。 我觉得我可能没有明确表示我希望d3如何转换，但我不确定如何给d3它想要的东西。 非常感谢您的帮助。

编辑：x轴域：[0,1]。 y轴域：[ - 18600，-3300]。

// Here's just a few rows of the data
data = [{"threshold": 0.0, "loss": -18600},
        {"threshold": 0.008571428571428572, "loss": -18600},
        {"threshold": 0.017142857142857144, "loss": -18600}]

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 20},
    width = +svg.attr("width") - 400 - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;


var x = d3.scaleLinear()
    .range([0, width]);

var y = d3.scaleLinear()
    .range([0, height]);

var line = d3.line()
    .x(d => x(d.threshold))
    .y(d => y(d.loss));

var g = svg.append("g")
    .attr("transform", "translate(" + (margin.left + 50) + "," + margin.top + ")");

d3.json("static/data/thresh_losses.json", function(thisData) {
 draw(thisData);
});

let draw = function(data) {
    $("svg").empty()
    var x = d3.scaleLinear()
        .range([0, width]);

    var y = d3.scaleLinear()
        .range([0, height]);

    var line = d3.line()
        .x(d => x(d.threshold))
        .y(d => y(d.loss));

    var g = svg.append("g")
        .attr("transform", "translate(" + (margin.left + 50) + "," + margin.top + ")");

    d3.selectAll("g").transition().duration(3000).ease(d3.easeLinear);

    x.domain([0, d3.max(data, d => d.threshold)]);
    y.domain([d3.max(data, d => d.loss), d3.min(data, d => d.loss)]);

    g.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x))
        .append("text")
        .attr("class", "axis-title")
        .attr("y", 18)
        .attr("dy", "1em")
        .attr("x", (height/2) - 40)
        .attr("dx", "1em")
        .style("text-anchor", "start")
        .attr("fill", "#5D6971")
        .text("Threshold");

    g.append("g")
        .attr("class", "axis axis--y")
        .call(d3.axisLeft(y))
        .append("text")
       .attr("class", "axis-title")
       .attr("transform", "rotate(-90)")
       .attr("y", -40)
       .attr("dy", ".71em")
       .attr("x", -height/2 + 40)
       .attr("dx", ".71em")
       .style("text-anchor", "end")
       .attr("fill", "#5D6971")
       .text("Profit ($)");

    var line_stuff = g.selectAll(".line")
        .data([data]);

    line_stuff.enter().append("path").classed("line", true)
           .merge(line_stuff);

    g.selectAll(".line")
      .transition()
      .duration(10000)
      .ease(d3.easeLinear)
      .attr("d", line);
};

Answer 1

从D3文档 ：

要应用转换，请选择元素，调用选择 .transition ，然后进行所需的更改。

我在代码中发现了这个：

d3.selectAll("g").transition().duration(3000).ease(d3.easeLinear);

这不会动画任何东西，因为最后没有.attr()或.style() - 没有“期望的变化”。 这是一个没有变化的过渡。

现在，让我们来看看：

g.selectAll(".line")
  .transition()
  .duration(10000)
  .ease(d3.easeLinear)
  .attr("d", line);

这几乎满足了要求。 它选择.line ，创建转换（并自定义），并设置d属性。 如果您d设置在其他地方，那么这将要被空其所有的数据转换的路径，只...

D3不会以这种方式转换字符串。 在首先检查属性是数字还是颜色之后 ，D3开始使用名为interpolateString东西。 您认为interpolateString会将字符从a更改为ab到abc ，但实际上，它所做的只是查找字符串中的数字，然后插入这些数字，使字符串的其余部分保持不变 。 结果是，除非你自己动手，否则你无法动画像d一样的字符串从空到动画。

以下是使用attrTween （注意：不是一个好主意） ：

.attrTween("d", function() {
  return function(t) {
    const l = line(data);
    return l.substring(0, Math.ceil(l.length * t));
  };
})

这实际上将在没有文本到d属性的整个文本之间转换。 但是，由于SVG路径的工作方式，这看起来不太好。

还有另一种方式，如您链接的示例（ Ryan Morton在评论中也提到）中所示： 转换stroke-dashoffset 。 这是你如何做到这一点：

line_stuff.enter().append("path").classed("line", true)
  .merge(line_stuff)
  .attr('d', line)
  .attr("fill", "none")
  .attr("stroke", "black")
  .attr("stroke-dasharray", function(d) {
    return this.getTotalLength()
  })
  .attr("stroke-dashoffset", function(d) {
    return this.getTotalLength()
  });

g.selectAll(".line")
  .transition()
  .duration(10000)
  .ease(d3.easeLinear)
  .attr("stroke-dashoffset", 0);

基本上，第一部分告诉D3：

• 创建线，使填充不可见（所以你可以看到线）
• 使笔划破折号等于该行的总长度
• 偏移破折号，以便在开始时完全隐藏该行

下一部分设置转换并告诉它将偏移转换为0（此时该线将完全可见，因为每个破折号与线本身的长度相同）。

如果要转换填充，可以将.attr("fill", "none")更改为.attr("fill", "#fff") ，然后执行以下操作：

g.selectAll(".line")
  .transition()
  .delay(10000)
  .duration(2000)
  .ease(d3.easeLinear)
  .attr('fill', '#000');

这将使用.delay()等待第一次转换完成，然后将背景从白色更改为黑色。 请注意， 不透明度可能更适合为性能设置动画 。