Dimple.JS动画线系列动画

Question

我正在尝试使用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);

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

先谢谢你...

Answer 1

是的，这是可能的。如果你检查一下chrome开发人员栏中的svg行，就会发现它是一个svg路径，它可以用css...the路径进行动画处理，类名是酒窝线条。因此，只需为这个类名添加一点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/