d3.compose
使用 d3 和 d3.chart 从图表（如线条和条形图）和组件（如坐标轴、标题和图例）组成丰富的、数据绑定的图表。
- 先进的布局引擎可以自动定位和调整图表和组件的大小，按 z-index 分层，并且默认为自动缩放的响应式布局。
- 用于快速创建漂亮图表的标准图表和组件库。
- 用于创建可组合和可重用的图表和组件的图表和组件基础。
- 包括涵盖一系列标准功能的辅助程序和混搭程序。
- 基于 CSS 类的样式是可扩展的，并且易于定制，以匹配您的网站。
入门
- 下载 最新版本
- 下载依赖：
-
将 d3.compose 和依赖加入到你的 html：
<!doctype html> <html> <head> <!-- ... --> <link rel="stylesheet" type="text/css" href="d3.compose.css"> </head> <body> <!-- ... --> <script src="d3.js"></script> <script src="d3.chart.js"></script> <script src="d3.compose.js"></script> <!-- Your code --> </body> </html> -
Create your first chart
var chart = d3.select('#chart') .chart('Compose', function(data) { var scales = { x: {type: 'ordinal', data: data, key: 'x'}, y: {data: data, key: 'y'} }; var charts = [ d3c.lines({ data: data, xScale: scales.x, yScale: scales.y }) ]; var yAxis = d3c.axis({scale: scales.y}); return [ [yAxis, d3c.layered(charts)] ]; }) .width(600) .height(400); chart.draw([{x: 0, y: 10}, {x: 10, y: 50}, {x: 20, y: 30}]);
例子和文档
参见 http://CSNW.github.io/d3.compose/，获取现场示例和文档。
开发
- 安装模块 npm install
- 使用 npm test 或 npm run test:watch 进行测试。
- 用 npm run build 构建
测试说明。需要 Node 4+（适用于最新的 jsdom），而且 d3.chart 目前不支持从 node 内运行，需要在 node_modules/d3.chart.js 中的 IIFE 内添加以下一行：window = this; (在 use strict 之前)。这个问题将通过一个 pending PR 来解决，以解决d3.chart的这个问题（另外，对 d3.chart 的依赖可能会在以后的 d3.compose 版本中被移除）。
发布
(所有的变化都合并到主分支上)
- npm version {patch|minor|major|version}
- npm publish
文档
- 在主站，运行 npm run docs
- 切换到 gh-pages 分支
- 导航到 _tasks 目录 (cd _tasks)
- (npm install _tasks, if necessary)
- 运行 docs 任务 npm run docs
- 导航回到根部
- 查看网站用 bundle exec jekyll serve
注意：为了加快迭代速度，单独创建一个克隆，切换到 gh-pages 分支，将 docs_path 环境变量设置为原始克隆（如 Windows：SET docs_path=C:\...\d3.compose_\docs\），然后运行步骤 3-6。
