使用D3的自定义布局 [英] Custom layouts using D3
问题描述
我要实现自定义布局/图表.
I want to implement a custom layout/chart.
目前,我已经使用纯HTML,CSS& jQuery( http://jsfiddle.net/yuvraj20/Vj7Vy/).
Currently I have implemented a demo of it using pure HTML, CSS & jQuery (http://jsfiddle.net/yuvraj20/Vj7Vy/).
$(document).ready(function(){
var $circles = $(".circles");
routine();
function routine(){
$circles.addClass("visible"); //Intial load animation
$("div", $circles).addClass("visible");
$(".line").addClass("grow");
}
$circles.on("click", function(){
if($circles.hasClass("rotate")){
var $this = $(this);
$circles.removeClass("rotate");
$(".center").removeClass("center");
setTimeout(function(){
$this.addClass("center").siblings(".circles").addClass("rotate");
},1);
}
});
});
但是我想知道是否可以在D3中构建它,以便可以添加更复杂的动画,并且图表会更通用.
But I want to know if I can build this in D3 so I can add more complex animations and the chart will be more generic.
我找不到有关如何使用D3构建自定义布局的任何信息.
I couldn't find anything on how to build custom layout using D3.
有什么想法的人吗?
推荐答案
是的,可以. 所有布局在D3中是自定义的,因为D3公开了用于处理映射到数据集中的SVG/DOM元素的低级接口.这包括一个相当简单的过渡界面.
Yes, you can. All layouts are custom in D3, as D3 exposes a low level interface for manipulating SVG/DOM elements in mappings to a dataset. This includes a fairly straightforward transition interface.
如果您想对D3的工作原理和使用方式有1,000英尺的了解,我建议您参考Mike Bostock的D3教程.
I would suggest looking at Mike Bostock's D3 tutorials if you want a 1,000 foot sense of how D3 works and how you might employ it.
这篇关于使用D3的自定义布局的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!