Dimple.JS动画线系列动画

我想要使用Dimple.js实现图表，下面是我试图在两个系列（Bar和Line在这里）分别设置动画的代码，但它看起来像线条系列动画像条系列（从下到上）。然而，我期待更喜欢在这里进行动画：http://bl.ocks.org/duopixel/4063326 Dimple.JS动画线系列动画

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

是否有可能单独动画线系列？任何人都可以帮忙吗？

在此先感谢...

来源

2016-09-21 Kiran

，我想知道，如果它有可能此，请让你找到我。另外，我认为为了做类似这样的事情，您可能需要从d3.js进行修改，因为dimple.js对文档没有任何相关信息。 – mtkilic

有人可以帮我找到解决方案吗？或者我们不能使用Dimple.JS或D3直接动画折线图？ – Kiran

是的，这是可能的。如果你检查chrome开发人员栏中的svg行，它是一个可以用css动画的svg路径...路径类名称是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/

来源

2016-10-21 00:03:31 Rob

Dimple.JS动画线系列动画

回答

相关问题