js动画线系列动画
Dimple.JS Animate line series animation
我试图使用Dimple.js实现图表,下面是我试图分别动画两个系列(条和线在这里)的代码,但它看起来像线系列动画像条系列(从下到上)。然而,我期待更像动画执行在这里:http://bl.ocks.org/duopixel/4063326
<div id="divBarWithLineChart" class="DimpleChart"></div>
var width = $('#divBarWithLineChart').width();
var height = $('#divBarWithLineChart').height();
var svg = dimple.newSvg("#divBarWithLineChart", width - 20, height);
d3.json("Scripts/Data/Data.json", function (data) {
// Filter the data for a single channel
data = dimple.filterData(data, "Channel", "Hypermarkets");
// Create the chart
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 470, 300)
// Add an x and 2 y-axes. When using multiple axes it's
// important to assign them to variables to pass to the series
var x = myChart.addCategoryAxis("x", "Brand");
var y1 = myChart.addMeasureAxis("y", "Price");
var y2 = myChart.addMeasureAxis("y", "Sales Value");
// Order the x axis by sales value desc
x.addOrderRule("Sales Value", true);
// Color the sales bars to be highly transparent
myChart.assignColor("Sales", "#222222", "#000000", 0.1);
// Add the bars mapped to the second y axis
myChart.addSeries("Sales", dimple.plot.bar, [x, y2]);
// Add series for minimum, average and maximum price
var min = myChart.addSeries("Min", dimple.plot.line, [x, y1]);
min.aggregate = dimple.aggregateMethod.min;
myChart.setMargins("70px", "30px", "70px", "70px");
myChart.assignColor("Sales", "#083f65", "#083f65", 1);
myChart.assignColor("Min", "#c62828", "#c62828", 1);
myChart.staggerDraw = true;
myChart.ease = "bounce";
myChart.draw(1000);
可以单独动画线条系列吗?有人能帮忙吗?
这是可能的。如果你在chrome开发者栏中检查svg行,它是一个svg路径,可以用css动画…路径类名是dimple-line。因此,只需添加一点css为这个类名,当线绘制时,它模仿d3的例子完全(在我的网站http://dimplejs.org尝试过),它的工作完美…
<style>
.dimple-line {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
</style>
或虚线效果试试这个…
.dimple-line {
stroke-dasharray: 20;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
请参阅此网站了解此技术的其他变体…https://css-tricks.com/svg-line-animation-works/
相关文章:
- 如何设置html元素填充的动画
- 如何使用动画实现纸张推车
- 如何在生成下载文件时显示加载动画
- 剑道网格jQuery动画()问题
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- jQuery Lazy加载动画滚动
- jquery动画可以通过编程链接吗
- Javascript将数学动画化
- 动画.CSS重播
- 制作一个不带HTML a标记但在动画播放完毕后指向其他页面的超链接
- 如何使用jQuery在动画中期加速动画
- 使用数据上的角度更改设置集合的第一个元素的动画
- 如何使用css动画/javascript使具有背景图像的元素出现
- 如何使用css动画从中心增加边界线
- 动态更改高图中的系列颜色
- JQuery动画延长容器不起作用
- 动画CSS进度条
- GWT Highcharts-禁用系列动画
- Highcharts,当更新图表中的系列数时没有动画
- js动画线系列动画