Javascript 是否使用D3.js（v4）制作折线图动画？

是否可以使用D3.js（版本4）创建动画？特别是，我想创建多个从左到右“运行”的折线图，如使用react fusionchart的示例所示：

（请看上面的例子。）

FusionCharts.ready（函数（）{
var myDataSource={
“图表”：{
“说明”：“实际收入、目标收入和利润”，
“子选项”：“去年”，
“xaxisname”：“月份”，
“yaxisname”：“金额（美元）”，
“numberprefix”：“$”，
“主题”：“海洋”
},
“类别”：[{
“类别”：[{
“标签”：“一月”
}, {
“标签”：“二月”
}, {
“标签”：“Mar”
}, {
“标签”：“Apr”
}, {
“标签”：“可能”
}, {
“标签”：“六月”
}, {
“标签”：“七月”
}, {
“标签”：“八月”
}, {
“标签”：“Sep”
}, {
“标签”：“十月”
}, {
“标签”：“11月”
}, {
“标签”：“十二月”
}]
}],
“数据集”：[{
“系列名称”：“预计收入”，
“渲染”：“线条”，
“showvalues”：“0”，
“数据”：[{
“价值”：“15000”
}, {
“值”：“16000”
}, {
“值”：“17000”
}, {
“值”：“18000”
}, {
“价值”：“19000”
}, {
“价值”：“19000”
}, {
“价值”：“19000”
}, {
“价值”：“19000”
}, {
“价值”：“20000”
}, {
“值”：“21000”
}, {
“值”：“22000”
}, {
“值”：“23000”
}]
}]
};
var chartConfigs={
id:“收入利润表”，
renderAt:“收入利润表容器”，
类型：“mscombi2d”，
宽度：600，
身高：400，
数据格式：“json”，
数据源：myDataSource
};
React.render（,
document.getElementById（“图表容器”）
);
});

是的，您可以这样做：您只需要替换从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);

等等等等

你可以找到那个。 我的示例是的v4更新。

---

希望这能有所帮助。

DuckDuckGo to the rescue:@Owen这不是v4，但OP的答案仍然是“是”@thadeuszlay如果你能证明你已经努力创建了自己的折线图，那就太好了。这毕竟是一个从v3到v4的简单更新，我们可以相信管理d3的人员能够维护折线图转换！有没有一种没有“帷幕”的方法？因为如果我想在一个图表中使用不同的图形，例如从下到上设置动画的条形图和从左到右的折线图，我该怎么做？是的，有：）。可以设置线条长度的动画。这实际上是更好的方法，但您最初提到的案例并不需要它。请阅读这篇文章（）来制作线条动画。您将不得不再次更新D3V4的方法，但这应该不会太困难。谢谢您的建议！

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