You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

README.md 2.8 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. # Building a customized D3.js bundle
  2. The D3.js version distributed with pprof is customized to only include the modules required by pprof.
  3. ## Dependencies
  4. First, it's necessary to pull all bundle dependencies. We will use a JavaScript package manager, [npm](https://www.npmjs.com/), to accomplish that. npm dependencies are declared in a `package.json` file, so create one with the following configuration:
  5. ```js
  6. {
  7. "name": "d3-pprof",
  8. "version": "1.0.0",
  9. "description": "A d3.js bundle for pprof.",
  10. "scripts": {
  11. "prepare": "rollup -c && uglifyjs d3.js -c -m -o d3.min.js"
  12. },
  13. "license": "Apache-2.0",
  14. "devDependencies": {
  15. "d3-selection": "1.1.0",
  16. "d3-hierarchy": "1.1.5",
  17. "d3-scale": "1.0.6",
  18. "d3-format": "1.2.0",
  19. "d3-ease": "1.0.3",
  20. "d3-array": "1.2.1",
  21. "d3-collection": "1.0.4",
  22. "d3-transition": "1.1.0",
  23. "rollup": "0.51.8",
  24. "rollup-plugin-node-resolve": "3",
  25. "uglify-js": "3.1.10"
  26. }
  27. }
  28. ```
  29. Besides the bundle dependencies, the `package.json` file also specifies a script called `prepare`, which will be executed to create the bundle after `Rollup` is installed.
  30. ## Bundler
  31. The simplest way of creating a custom bundle is to use a bundler, such as [Rollup](https://rollupjs.org/) or [Webpack](https://webpack.js.org/). Rollup will be used in this example.
  32. First, create a `rollup.config.js` file, containing the configuration Rollup should use to build the bundle.
  33. ```js
  34. import node from "rollup-plugin-node-resolve";
  35. export default {
  36. input: "index.js",
  37. output: {
  38. format: "umd",
  39. file: "d3.js"
  40. },
  41. name: "d3",
  42. plugins: [node()],
  43. sourcemap: false
  44. };
  45. ```
  46. Then create an `index.js` file containing all the functions that need to be exported in the bundle.
  47. ```js
  48. export {
  49. select,
  50. selection,
  51. event,
  52. } from "d3-selection";
  53. export {
  54. hierarchy,
  55. partition,
  56. } from "d3-hierarchy";
  57. export {
  58. scaleLinear,
  59. } from "d3-scale";
  60. export {
  61. format,
  62. } from "d3-format";
  63. export {
  64. easeCubic,
  65. } from "d3-ease";
  66. export {
  67. ascending,
  68. } from "d3-array";
  69. export {
  70. map,
  71. } from "d3-collection";
  72. export {
  73. transition,
  74. } from "d3-transition";
  75. ```
  76. ## Building
  77. Once all files were created, execute the following commands to pull all dependencies and build the bundle.
  78. ```
  79. % npm install
  80. % npm run prepare
  81. ```
  82. This will create two files, `d3.js` and `d3.min.js`, the custom D3.js bundle and its minified version respectively.
  83. # References
  84. ## D3 Custom Bundle
  85. A demonstration of building a custom D3 4.0 bundle using ES2015 modules and Rollup.
  86. [bl.ocks.org/mbostock/bb09af4c39c79cffcde4](https://bl.ocks.org/mbostock/bb09af4c39c79cffcde4)
  87. ## d3-pprof
  88. A repository containing all previously mentioned configuration files and the generated custom bundle.
  89. [github.com/spiermar/d3-pprof](https://github.com/spiermar/d3-pprof)