javascript - 使用 D3.js (v4) 制作折线图动画？

Question

是否可以使用 D3.js(版本 4)创建动画？特别是我想创建多个从左到右“运行”的折线图，就像这个例子中的 react-fusionchart:

http://jsfiddle.net/thadeuszlay/m18qaekm/12/

(只看上面的例子。)

FusionCharts.ready(function () {
    var myDataSource = {
        "chart": {
            "caption": "Actual Revenues, Targeted Revenues & Profits",
                "subcaption": "Last year",
                "xaxisname": "Month",
                "yaxisname": "Amount (In USD)",
                "numberprefix": "$",
                "theme": "ocean"
        },
            "categories": [{
            "category": [{
                "label": "Jan"
            }, {
                "label": "Feb"
            }, {
                "label": "Mar"
            }, {
                "label": "Apr"
            }, {
                "label": "May"
            }, {
                "label": "Jun"
            }, {
                "label": "Jul"
            }, {
                "label": "Aug"
            }, {
                "label": "Sep"
            }, {
                "label": "Oct"
            }, {
                "label": "Nov"
            }, {
                "label": "Dec"
            }]
        }],
            "dataset": [{
            "seriesname": "Projected Revenue",
                "renderas": "line",
                "showvalues": "0",
                "data": [{
                "value": "15000"
            }, {
                "value": "16000"
            }, {
                "value": "17000"
            }, {
                "value": "18000"
            }, {
                "value": "19000"
            }, {
                "value": "19000"
            }, {
                "value": "19000"
            }, {
                "value": "19000"
            }, {
                "value": "20000"
            }, {
                "value": "21000"
            }, {
                "value": "22000"
            }, {
                "value": "23000"
            }]
        }]
    };

    var chartConfigs = {
        id: "revenue-profits-chart",
        renderAt: "revenue-profits-chart-container",
        type: "mscombi2d",
        width: 600,
        height: 400,
        dataFormat: "json",
        dataSource: myDataSource
    };

    React.render( < react_fc.FusionCharts {...chartConfigs
    }
    />,
        document.getElementById("chart-container")
    );
});

Answer 1

是的，你可以这样做:你只需要替换从 d3 v3 到 v4 的方法，例如:

var parse = d3.timeParse("%b %Y");
var x = d3.scaleTime().range([0, width]),
    y = d3.scaleLinear().range([height, 0]),
    xAxis = d3.axisBottom(x).tickSize(-height),
    yAxis = d3.axisLeft(y).tickArguments(4);

等等。等等

您可以找到 working example on my bl.ocks . 我的示例是 another bl.ocks 的 v4 更新. 希望对您有所帮助。