Setting Up D3 in LWC

D3 in Trial of the Titans

• Our goal for data visualization in our project was to dynamically render visually appealing graphics in view layer based on record changes in the data model.
• There are several third party Javascript libraries for accomplishing this task, but D3 was the most practical considering its existing use in the codebase as well as generous licensing.

Security

• Salesforce implements various security measures to help protect its users from external attacks when accessing the platform. This presented a couple challenges for us as developers, as our implementation needed to comply with these security policies.
• The first was uploading the D3 library as a static resource in our organization, and using the Platform Resource Loader module of the Lightning Framework to meet Salesforce’s Content Security Policy.
  • The loadScript method from the Platform Resource Loader loads the D3 library from static resources, then fulfills a javascript promise (if no errors occur) where you should implement your chart drawing logic or load a secondary library that depends on D3.
• And secondly, we used the LWC DOM equals manual directive to allow the D3 javascript code to directly manipulate HTML elements within individual components and conform to DOM Access Containment restrictions.
  • Due to the encapsulation mechanics of the shadow DOM, we needed to use this.template.querySelector('div') instead of document.querySelector('div') in order to select a specific element for binding.
• By researching extensively through Salesforce documentation, we were able to successfully integrate D3 with Salesforce metadata in order to meet our business requirements.

Sources: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.js_third_party_library