Question

我正在使用d3创建一个简单的折线图，我正在尝试在进行数据更新时为该线设置动画（现在只有一行）。

// https://bl.ocks.org/mbostock/3883245
// http://bl.ocks.org/d3noob/7030f35b72de721622b8
function LineChart(options) {
    // Mike Bostock margin conventions.
    // See http://bl.ocks.org/mbostock/3019563 for more info.
    const margin = this.margin = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 40
    };

    // Used by some of the functions that get a different context when called by d3.
    const thisRef = this;

    this.width = options.width - margin.left - margin.right;
    this.height = options.height - margin.top - margin.bottom;

    this.x = d3.time.scale()
        .range([0, this.width]);
    this.y = d3.scale.linear()
        .range([this.height, 0]);

    this.xAxis = d3.svg.axis()
        .scale(this.x)
        .orient('bottom');
    this.yAxis = d3.svg.axis()
        .scale(this.y)
        .orient('left');

    this.line = d3.svg.line()
        // https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Shapes#line_interpolate
        .interpolate(options.interpolate)
        .x(function(d) {
            return thisRef.x(d.date);
        })
        .y(function(d) {
            return thisRef.y(d.value);
        });

    // Create an SVG element (appended to `#chart`):
    // 1. set size;
    // 2. add a `g` element (as in a group) - the `svg` variable here is a `g` element now;
    // 3. set the transform on `<g>` (not on `<svg>`).
    this.svg = d3.select(options.target)
        .append('svg')
        .attr('width', this.width + margin.left + margin.right)
        .attr('height', this.height + margin.top + margin.bottom)
        .append('g')
        .attr('transform', `translate(${margin.left}, ${margin.top})`);

    // Add x axis.
    this.svg.append('g')
        .attr('class', 'x axis')
        .attr('transform', `translate(0, ${this.height})`)

    // Add y axis (with a label).
    this.svg.append('g')
        .attr('class', 'y axis')
        // Just for the title (ticks are automatic).
        .append('text')
        // Rotate the text.
        .attr('transform', 'rotate(-90)')
        .attr('y', 6)
        .attr('dy', '.71em')
        .style('text-anchor', 'end')
        .text('Price ($)');
}

LineChart.prototype.update = function update(data) {
    const thisRef = this;

    this.x.domain(d3.extent(data, function(d) {
        return d.date;
    }));
    this.y.domain(d3.extent(data, function(d) {
       return d.value;
    }));

    this.svg.select('.x.axis')
        .transition()
        .call(this.xAxis);
    this.svg.select('.y.axis')
        .transition()
        .call(this.yAxis)

    const lines = this.svg.selectAll('.line')
        .data(data, function(d) {
            return d.label;
        });

    lines.enter()
        .append('path')
        .attr('class', 'line');

    lines.transition()
        .duration(1500)
        .attr('d', this.line(data));

    lines.exit()
        .remove();
}

您可以看到正在运行的示例here。

在示例中，有3000毫秒的延迟，之后您将看到更新和动画。

但是我有一个小问题，该行的一部分被抛出而没有任何动画。

我很难弄清楚发生了什么，因为我对d3不是很有经验，我们将不胜感激一些帮助：）

Answer 1

D3动画DOM元素。在您的示例中只有一个DOM元素（一行），D3认为您更改了一行（1500毫秒）。它不知道如何处理丢弃的点数（或添加点数）。 SVG路径段不是动画的单位。更改数据时，“输入”和“退出”选项不会更改（并且“退出”选项为空）。

您有两种选择：

在删除数据之前，请创建一个带有缺失点的额外行（DOM元素），并单独为其设置动画。

创建该行的片段（因此，制作多行，每2个点一行），并为它们设置动画（请参阅http://jsfiddle.net/L1tLot0v/15/）。不幸的是，插值不会很酷。

var segmentedData = segments(data);
const lines = this.svg.selectAll('.line')
    .data(segmentedData, function(d) {
        return d[0].date;
});

var lineFunc = this.line;
lines.enter()
    .append('path')
    .attr('class', 'line')
    .style("opacity", 0.0)
    .attr('d', function(d) {
      return lineFunc(d)})
    .transition()
    .duration(1000)
    .style("opacity", 1.0);

lines.exit()
  .transition()
  .duration(1000)
  .style("opacity", 0.0)
  .remove();

动画d3.js折线图路径退出

1 个答案: