Issue with importing d3-selection-multi into TypeScript version 2.0 and d3 version 4.2.1

I am currently working on integrating d3 v4 into a typescript project through jspm and systemjs. Successfully importing d3 with the following code:

import * as d3 from 'd3';

This import allows me to perform selections, but when trying to use the attr function with an object, it does not work. Upon further investigation, I discovered that d3 v4 has this functionality in a separate module.

After downloading the d3-selection-multi module using jspm, I attempted to import it into my project like this:

import * as d3 from 'd3';
import 'jspm_packages/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c782f316f7970797f687573723171697068755c2d322c32">[email protected]</a>';

However, when trying to use the attrs function, I encountered the following error in the console:

(index):40 Error: (SystemJS) d3.selectAll(...).data(...).style(...).attrs is not a function(…)

I am also facing some compile errors which occur consistently, yet the code still compiles and runs successfully.

error TS2307: Cannot find module 'd3'
error TS1110: Type expected

If anyone can provide insight into what might be going wrong and offer a solution, it would be much appreciated.

d3.jstypescriptsystemjsjspm

Answer №1

This code snippet should do the trick

  import * as d3 from 'd3';
  import 'd3-selection-multi';

Answer №2

In order to streamline my code, I decided to consolidate all the d3 packages into a single 'bundle' file for import instead of importing each package individually. While this may not be the most efficient approach, it is effective (I have removed unnecessary packages to optimize space):

// export * from 'd3-array';
// export * from 'd3-axis';
// export * from 'd3-brush';
// export * from 'd3-chord';
// export * from 'd3-collection';
// export * from 'd3-color';
// export * from 'd3-dispatch';
// export * from 'd3-drag';
// export * from 'd3-dsv';
// export * from 'd3-ease';
// export * from 'd3-force';
// export * from 'd3-format';
// export * from 'd3-geo';
// export * from 'd3-hierarchy';
// export * from 'd3-interpolate';
// export * from 'd3-path';
// export * from 'd3-polygon';
// export * from 'd3-quadtree';
// export * from 'd3-queue';
// export * from 'd3-random';
// export * from 'd3-request';
// export * from 'd3-scale';
export * from 'd3-selection';
export * from 'd3-selection-multi';
export * from 'd3-shape';
// export * from 'd3-time';
// export * from 'd3-time-format';
// export * from 'd3-timer';
// export * from 'd3-transition';
// export * from 'd3-voronoi';
// export * from 'd3-zoom';

To implement this, all I need to do is:

import * as D3 from './d3.bunde.ts';

Just a note - I am using angular-cli to build my project, though it might not make much difference in this context.

Answer №3

Here is a practical example using "jspm + d3-selection-multi": check out the link for more details and code snippets - https://github.com/jakeNiemiec/jspm_d3

If you find yourself needing to import the entire D3 library, you can do so with the command jspm install npm:d3. Keep in mind that this may increase the size of your project significantly. Don't forget to explore the build script provided in the package.json file: package.json build script.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Storing the selected value from dynamically generated options in Angular using ngFor

I have a collection of items called Fixtures. Each fixture contains a group of items named FixtureParticipants. Here is my process for generating choices: <tr *ngFor="let fixture of fixtures$ | async; let i=index"> <th scope="row& ...

htmlangulartypescript

Tips for enabling TypeScript's static typings to function during runtime

function multiply(num: number): number { console.log(num * 10) // NaN return num * 10 } multiply("not-a-number") // result == NaN When attempting to call the function above with a hardcoded invalid argument type, TypeScript correctly identifies and w ...

javascriptnode.jstypescript

Retrieve Data using Axios and Save in Interface with Multiple Arrays in TypeScript

Hey everyone, I'm facing an issue when trying to make a GET request using Axios through an API. When I try to assign the selected data from Axios to the userDetail interface, it gives me an error. Please take a look at the Code Sandbox where I have in ...

reactjstypescriptreact-typescript

What is the Most Effective Way to Arrange an Array of Objects Based on Property or Method?

Looking for ways to enhance my array sorting function, which currently sorts by property or method value. The existing code is functional, but I believe there's room for improvement due to redundant sections. optimizeSort(array: any, field: string): ...

javascriptarraystypescriptsorting

Steps for making a GET request from an API in Angular 7

Currently, I am attempting to retrieve JSON data using HttpClient in Angular 7. The code is functioning properly, but I am exploring the option of fetching the data directly from the API URL instead of relying on the const IMAGES array. import { Injectable ...

angulartypescriptangular7angular2-observablesangular-httpclient

The compilation fails when using TestUtils findRenderedComponentWithType with a Component<Props> definition

Content of the file package.json: { "scripts": { "test": "tsc --project . --noEmit" }, "dependencies": { "@types/react": "^16.7.6", "@types/react-dom": "^16.0.9", "react": "^16.6.3", "react-dom": "^16.6.3", "typescript": "^3. ...

reactjstypescripttypescript-typingsreact-tsx

Retrieve the service variable in the routing file

How do I access the service variable in my routing file? I created a UserService with a variable named user and I need to use that variable in my routing file. Here is the approach I tried, but it didn't work: In the routing file, I attempted: cons ...

javascriptangulartypescriptangular2-routing

Managing animations with multiple components in Angular 2+

I am currently developing an Angular application that will utilize a series of Modals in a wizard-style setup. For this project, I am utilizing the Angular-cli tool. Below is the code snippet showing how I have set up my animations: animations:[ t ...

angulartypescriptanimation

Verify the occurrence of an element within an array inside of another array

Here is the scenario: const arr1 = [{id: 1},{id: 2}] const arr2 = [{id: 1},{id: 4},{id: 3}] I need to determine if elements in arr2 are present in arr1 or vice versa. This comparison needs to be done for each element in the array. The expected output sho ...

javascriptreactjstypescript

Exploring ways to retrieve a function-scoped variable from within an Angular subscribe function

Here's the scenario: I have a simple question regarding an Angular component. Inside this component, there is a function structured like this: somethingCollection: TypeSomething[] ... public deleteSomething(something: TypeSomething): void { // so ...

angulartypescriptscope

Declare the type of variable associated with the store configuration

After setting up a pinia store using the setup store syntax as described in the documentation at , I encountered an issue while working with typescript and setup stores instead of option stores for my project. The problem arises with type annotations for ...

typescriptvue.jspinia

Mysterious attributes of angular 6's <table mat-table> tag

This particular question regarding the angular material table has not been duplicated in any other discussions. Other similar questions pertain to angular versions 2-5, not version 6 The issue I am encountering is as follows: Can't bind to 'dat ...

htmlangulartypescriptangular-material

What is the correct way to start a typed Object in TypeScript/Angular?

As I delve into the world of Angular and TypeScript, I am faced with a dilemma regarding how to initialize an object before receiving data from an API request. Take for instance my model: //order.model.ts export class Order { constructor(public id: num ...

javascriptangulartypescript

Mat backspin dialogue spinner

Our current setup involves using a progress spinner for each API call. The spinner is registered at the app module level, but we are facing an issue where the spinner hides behind the dialog popup. In order to solve this problem, we have decided to includ ...

angulartypescriptdialogangular-materialangular-material2

Transforming a dynamic array into a new dynamic array (with a different data type) based on a property that can change over time

Explaining my process with the example of a REST api returning a list of objects, each needing a checkbox for selection and further processing. The api may be called multiple times for data refresh, utilizing Observables to handle selected values as an Obs ...

angulartypescriptdata-bindingrxjs

calculating the sum of all individual items within an object

Is there a way to map an object, add specific values, and then calculate the total? I am looking to map the object below and extract certain items. Any suggestions? Object: [ { "description": "Current Term", " ...

angulartypescript

disable the button border on native-base

I'm attempting to enclose an icon within a button, like so: <Button style={styles.radioButton} onPress={() => { console.log('hdjwk'); }}> <Icon ...

javascriptcssreactjstypescriptreact-native

The module '@types/googlemaps/index.d.ts' cannot be found

I'm working on integrating the Google Maps API into my Angular project and ran into some issues. Here's what I did to install the necessary npm packages: npm install @agm/core --save-dev npm install @types/googlemaps --save-dev Next, I added th ...

angulartypescriptangular-cliangular-cli-v6

Retrieve the accurate file name and line number from the stack: Error object in a JavaScript React Typescript application

My React application with TypeScript is currently running on localhost. I have implemented a try...catch block in my code to handle errors thrown by child components. I am trying to display the source of the error (such as file name, method, line number, ...

javascriptreactjstypescripterror-handling

Determine the data type of a parameter by referencing a prior parameter

Consider a scenario in my software where I have two distinct implementations of an Event Emitter. For instance: type HandlerA = (data: boolean) => void; type HandlerB = (data: number) => void; // HandlerB is somehow different from HandlerA type Eve ...

typescripttypescript-generics