Dimple.js条形图过渡,包括删除的条形图

Dimple.js bar chart transitions including removed bars


Dimple.js条形图过渡,包括删除的条形图 已获得1个解决方法 2020-08-18 18:08:44 javascript

当转换到在酒窝条形图中具有较少或不同条形的新数据时,将被移除的条形彼此推到图表的左侧,并在整个转换时间内停留.

下面是重新创建效果的代码示例:

var svg = dimple.newSvg("#chartContainer", 590, 400);
var data = [
    { Animal: "Cats", Value: (Math.random() * 1000000) },
    { Animal: "Dogs", Value: (Math.random() * 1000000) },
    { Animal: "Mice", Value: (Math.random() * 1000000) },
    { Animal: "Rat", Value: (Math.random() * 1000000) },
    { Animal: "Cow", Value: (Math.random() * 1000000) }
];
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 510, 305)
var x = myChart.addCategoryAxis("x", "Animal");
x.addOrderRule(["Cats", "Dogs", "Mice"]);
myChart.addMeasureAxis("y", "Value");
myChart.addSeries(null, dimple.plot.bar);
myChart.draw();

d3.select("#btn").on("click", function() {
   myChart.data = [
     { Animal: "Cats", Value: (Math.random() * 1000000) },
     { Animal: "Dogs", Value: (Math.random() * 1000000) },
     { Animal: "Mice", Value: (Math.random() * 1000000) }
   ];
   myChart.draw(1000);
});

如果单击示例中的按钮,您将看到效果.示例: http://jsfiddle.net/nf57j/25/

(这里改编自John Kiernander的回答: 选择新选项时更新dimple.js图表)

有没有一种方法可以将卸下的杆保持在过渡范围内?


Dimple.js条形图过渡,包括删除的条形图 方法1

我已经重写了将在周一发布的Dimple v2.0的所有过渡代码.我刚刚在版本2中尝试了这个示例,它看起来好多了.


.htaccess .net .net-core 2d 3d 3d-printing ab-initio abp abstract-syntax-tree actions-on-google actionscript-3 active-directory activemq activemq-artemis acumatica adobe-xd aframe ag-grid agora.io air airflow ajax akka alert alexa algorithm alignment allure amadeus amazon-cloudformation