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 documentation：

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

我在代码中找到了这个：

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

这不会为任何内容制作动画，因为最后没有.attr()或.style() - 没有＆＃34;所需的更改＆＃34;正在制作中。这是一个没有变化的过渡。

现在，让我们来看看：

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

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

D3不会以这种方式转换字符串。在第一次checking if the attribute is a number or color之后，D3开始使用名为interpolateString的东西。您认为interpolateString会将字符从a更改为ab到abc，但实际上，它只会is look for numbers within the string, and interpolate those, leaving the rest of the string constant。结果是，你不能将像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中的comment也提到）中所示：transitioning the 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()等待第一次转换完成，然后将背景从白色更改为黑色。请注意opacity might be better to animate for performance。

d3 v4折线图过渡不起作用

1 个答案: