使用D3的自定义布局

时间:2014-08-05 07:07:13

标签: javascript d3.js graph charts data-visualization

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

目前我已经使用纯HTML,CSS和&amp ;;实现了它的演示。 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构建自定义布局的任何内容。

任何想法的人?

1 个答案:

答案 0 :(得分:0)

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

我建议你看一下Mike Bostock的D3教程,如果你想要了解D3如何工作以及如何使用它的话。