D3.js（v4）による線グラフのアニメーション？

Question

D3.js（バージョン4）でアニメーションを作成することはできますか？特に、私は、複数の折れ線グラフを作成することに反応-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

はい、あなたはそれを行うことができます：あなただけV4にD3のV3から変更されている方法を交換する必要がある、など：

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アップデートです。 希望に役立ちます。