如何用d3.js实现3D立体感的图表，如柱形图饼图等。

1只小菜鸟 2018-03-09 01:36:36

如何用d3.js实现3D立体感的图表，如柱形图饼图等，具体样式如下图。有没有大神懂的，或者有demo也可以。

...全文

1275 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

D3是目前最流行的JavaScript可视化图表库之一，D3的图表类型非常丰富，并且支持SVG格式，因此应用十分广泛，也有很多图表插件基于D3开发，比如MetricsGraphics.js，在D3上构建的数据图表非常强大。 D3的特点允许绑定任意数据到DOM，将数据驱动转换应用到Document中。不仅可以创建精美的HTML表格，而且可以绘制折线图、柱形图和饼图等数据图表。支持SVG，在Web页面上渲染毫无压力

D3是目前最流行的JavaScript可视化图表库之一，D3的图表类型非常丰富，并且支持SVG格式，因此应用十分广泛，也有很多图表插件基于D3开发，比如MetricsGraphics.js，在D3上构建的数据图表非常强大。 D3的特点允许绑定任意数据到DOM，将数据驱动转换应用到Document中。不仅可以创建精美的HTML表格，而且可以绘制折线图、柱形图和饼图等数据图表。支持SVG，在Web页面上渲染毫无压力。

MetricsGraphics.js也是一款基于JavaScript的响应式图表库，和Chartist.js类似，MetricsGraphics.js同样支持几乎所有类型的图表，包括折线图、柱形图、饼图等。同时MetricsGraphics.js是基于可视化图表库D3上面的，因此开发者可以自定义很多功能强大的图表功能。

＃d3-example（版本：６．１．１）前言：使用d3替换的示例代码，如折线图，柱形图，面积图，饼图，其他定制化图表等。逐步更新中 1，目录结构 -lib-依赖文件 -utils.js-封装的公共方法函数 -commonDemo.html-通过公共方法创建的饼图，柱形图，折线图 -common.css-封装图表的公共样式维护 -README.md-项目相关介绍 2，基础用法说明：具体使用代码可以参考commonDemo.html，有现有示例的代码。需要引用utils.js，common.css使用公共的方法和公共样式。 1，基础折线图使用代码 // 折线图的基础配置 let lineOption = { xAxis : { show : true , type : 'category'

Tripal d3.js API 为Tripal提供d3.js集成。它提供了一个API，用于开发具有通用配置的一致的生物图，并提供了一些常见的图，例如饼图，条形图，柱形图和谱系图。注意：此模块是一个API，不提供面向用户的图表。相反，您将使用此API在自己的字段中轻松绘制通用图。有关如何使用此模块的示例，请参见。快速开始在您的Drupal库目录中解压缩（快速检查，您应该有一个librarys / d3 / d3.min.js文件；有关更多信息，请参阅drupal.org文档）。与其他任何Drupal模块一样，下载并安装此模块（）（可选）转到管理»Tripal»扩展模块»Tripal D3图以配置配色方案等。依存关系浏览器支持所有图测试： Chrome40.0.2214.111 Firefox 35.0.1 Safari 8.0.2 Internet

87,839

社区成员

224,615

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章