Javascript 使用D3的自定义布局

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

目前，我已经使用纯HTML、CSS和jQuery实现了一个演示

})

但是我想知道我是否可以在D3中构建它，这样我就可以添加更复杂的动画，图表也会更通用

我找不到任何关于如何使用D3构建自定义布局的信息

伙计们，有什么想法吗？

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

---

如果你想了解D3的工作原理和使用方法，我建议你看看Mike Bostock的D3教程。

嘿，吉米！你能分享一个有用的链接吗？@yuvraj-当然可以-看看这里有什么好的介绍：。你也可以在Scott Murray的博客上免费在线获取Scott Murray的“交互式网络数据可视化”的内容-谢谢。这给了我一个起点。我发现了另一个同样有用的演示-。本演示沿圆形路径移动一个圆。我建立在这个基础上。谢谢

$(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);
    }
});