Custom layouts using D3

问题

I want to implement a custom layout/chart.

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

});

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.

I couldn't find anything on how to build custom layout using D3.

Any ideas guys?

回答1:

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.

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.

来源：https://stackoverflow.com/questions/25133010/custom-layouts-using-d3