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更新。希望有所帮助。

D3.js（v4）的折线图动画？

1 个答案: