Implementation of d3-lasso in React

Question

I like to add a lasso to my d3 scatterplot in React. I would like to use the lasso to select items in a clusters. I managed to create a scatterplot in d3 but I cannot figure out to properly add the d3-lasso package to the chart. An example of a lasso is given on this page. The code of lasso goes as follows:

const lasso_start = (e) => {
            console.log(e);
            lasso.items()
                .attr("r",3.5) // reset size
                .classed("not_possible",true)
                .classed("selected",false);
        };

        const lasso_draw = (e) => {
            // Style the possible dots
            lasso.possibleItems()
                .classed("not_possible",false)
                .classed("possible",true);

            // Style the not possible dot
            lasso.notPossibleItems()
                .classed("not_possible",true)
                .classed("possible",false);
        };

        var lasso_end = (e) => {
            // Reset the color of all dots
            lasso.items()
                .classed("not_possible",false)
                .classed("possible",false);

            // Style the selected dots
            lasso.selectedItems()
                .classed("selected",true)
                .attr("r",7);

            // Reset the style of the not selected dots
            lasso.notSelectedItems()
                .attr("r",3.5);
        };

        const lassoSelect = () => lasso()
            .items(resultChart.selectAll('circle')) 
            .targetArea(resultChart)
            .on("start", (e) => lasso_start(e)) 
            .on("draw", (e) => lasso_draw(e)) 
            .on("end", (e) => lasso_end(e));

        resultChart.call(lassoSelect());

First problem is that there is a warning at the import of d3-lasso. My imports are as follows:

import * as d3 from 'd3';
import { lasso } from 'd3-lasso';

And the warning goes as follows:

Could not find a declaration file for module 'd3-lasso'. 'tool-ae-vis/node_modules/d3-lasso/build/d3-lasso.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/d3-lasso` if it exists or add a new declaration (.d.ts) file containing `declare module 'd3-lasso';

The warning is not solved by their suggestion. The warning doesn't cause any problems at this point. Unfortunately, it does cause problems when I run the code above. My console gives the following error when I run the code:

Uncaught ReferenceError: d3 is not defined at lasso (d3-lasso.js:776:1).

At this line d3.drag() is started in d3-lasso.js.

Can anybody help me with this problem? Thank you!

Answer 1

I faced similar issues and wanted to share my fix in case it helps somebody. To solve the issue, you need to create a new d3 object by combining d3 and lasso.

import * as d3Code from "d3";
import { lasso } from "d3-lasso";

const d3 = Object.assign(d3Code, { lasso });
window.d3 = d3;