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

等等。

你可以在我的bl.ocks上找到工作示例 。 我的例子是另一個bl.ocks的v4更新。 希望有所幫助。