使用 D3 的自定义布局

Question

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

目前我已经使用纯 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 构建自定义布局的信息。

各位有什么想法吗？

Answer 1

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

如果您想深入了解 D3 的工作原理以及如何使用它，我建议您查看 Mike Bostock 的 D3 教程。