javascript - 使用D3的自定义布局

我想实现自定义布局/图表。

目前，我已经使用纯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中构建它，以便可以添加更复杂的动画，并且图表会更通用。

对于如何使用D3构建自定义布局，我什么也找不到。

有想法吗？

最佳答案

是的你可以。所有布局在D3中都是自定义的，因为D3公开了用于处理映射到数据集中的SVG / DOM元素的低级接口。这包括一个相当简单的过渡界面。

如果您想对D3的工作原理和使用方式有1000英尺的了解，我建议看Mike Bostock的D3教程。