Summary: Update the d3 library to its last 6.x version available on https://github.com/d3/d3/releases This also requires updating the tooltip event handling of dots in `Chart.js` to avoid an `Uncaught TypeError: d3.event is undefined` per https://observablehq.com/@d3/d3v6-migration-guide#event-management linked from https://github.com/d3/d3/releases/tag/v6.0.0 Closes T15820 Test Plan: * Enable the Facts application, go to the Reports of a Project with task changes over time, look at charts, hover over data points, read the tooltip - e.g. on http://phorge.localhost/project/reports/1/ or http://phorge.localhost/maniphest/report/burn/ * Check HTML source of above URIs for the `<script type="text/javascript">` loading `d3.min.js` and open the JS file to verify the d3 version number bump. * Check Console of web browser's developer tools for no errors. Reviewers: O1 Blessed Committers, speck Reviewed By: O1 Blessed Committers, speck Subscribers: speck, tobiaswiese, valerio.bozzolan, Matthew, Cigaryno Maniphest Tasks: T15820 Differential Revision: https://we.phorge.it/D25631
2.3 KiB
D3: Data-Driven Documents
D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.
Resources
Installing
If you use npm, npm install d3
. Otherwise, download the latest release. The released bundle supports anonymous AMD, CommonJS, and vanilla environments. You can load directly from d3js.org, CDNJS, or unpkg. For example:
<script src="https://d3js.org/d3.v6.js"></script>
For the minified version:
<script src="https://d3js.org/d3.v6.min.js"></script>
You can also use the standalone D3 microlibraries. For example, d3-selection:
<script src="https://d3js.org/d3-selection.v2.js"></script>
D3 is written using ES2015 modules. Create a custom bundle using Rollup, Webpack, or your preferred bundler. To import D3 into an ES2015 application, either import specific symbols from specific D3 modules:
import {scaleLinear} from "d3-scale";
Or import everything into a namespace (here, d3
):
import * as d3 from "d3";
In Node:
const d3 = require("d3");
You can also require individual modules and combine them into a d3
object using Object.assign:
const d3 = Object.assign({}, require("d3-format"), require("d3-geo"), require("d3-geo-projection"));