gpt4 book ai didi

javascript - 使用 D3 的自定义布局

转载 作者:行者123 更新时间:2023-11-28 08:03:06 25 4
gpt4 key购买 nike

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

目前我已经使用纯 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 公开了一个低级接口(interface),用于操作映射到数据集的 SVG/DOM 元素。这包括一个相当简单的转换界面。

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

关于javascript - 使用 D3 的自定义布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25133010/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com