d3-lasso在React中的实现

Question

我喜欢在React中为d3散点图添加套索。我想使用套索来选择一个集群中的项目。我设法在d3中创建了一个散点图，但我不知道如何正确地将d3-lasso包添加到图表中。这一页给出了套索的一个例子。lasso的代码如下:

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());

第一个问题是在d3-lasso的导入处有一个警告。我的导入文件如下:

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

警告如下:

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';

警告没有被他们的建议解决。此时警告不会引起任何问题。不幸的是，当我运行上面的代码时，它确实会导致问题。当我运行代码时，我的控制台给出以下错误:

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

在这一行d3.drag()在d3-lasso.js中启动。

有人能帮我解决这个问题吗?谢谢你！

Answer 1

我遇到了类似的问题，想分享我的解决方案，以防它帮助别人。为了解决这个问题，你需要通过组合d3和lasso来创建一个新的d3对象。

import * as d3Code from "d3";
import { lasso } from "d3-lasso";
const d3 = Object.assign(d3Code, { lasso });
window.d3 = d3;