Анимация линейной диаграммы с 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

Да, вы можете сделать это: вам просто нужно заменить методы, которые были изменены с 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); 

Etc. Etc.

Вы можете найти working example on my bl.ocks. Мой пример - обновление v4 от another bl.ocks. Надеюсь, что помогает.