D3-tip和NPM："TypeError: m.tip不是一个函数“

Question

我正在围绕D3编写一个React包装器，但在尝试使用D3-tip：TypeError: m.tip is not a function时遇到错误。

我看到过类似的帖子(here和here)，还有d3-tip GitHub上的this issue，但在我的例子中都不起作用。我已经使用NPM安装了D3 4.12.2和D3-tip 0.7.1，所以这些链接中提到的版本问题应该不适用。

相关代码如下所示：

import * as d3 from 'd3';
import * as d3Tip from 'd3-tip';

svg = d3.select('#' + divId)
                    .append('svg')
                    .attr('width', width)
                    .attr('height', height);

g_node = svg.append('g')
                    .attr('id', 'g_node');

var node_circles = g_node.selectAll('circle')
                                .data(dataset, function(d) { return d.name; });

var tool_tip = d3Tip.tip()
        .attr('class', 'd3-tip')
        .offset([-8, 0]);

svg.call(tool_tip);

node_circles.enter()
                .append('circle')
                .attr('cx', function(d) { return projection(d.pos)[0]; })
                .attr('cy', function(d) { return projection(d.pos)[1]; })
                .attr('r', '' + NODE_RADIUS + 'px')
                .attr('fill', 'blue')
                .on('mouseover', function(d) {
                    tool_tip.show(d);
                })
                .on('mouseout', function(d) {
                    tool_tip.hide(d);
                });

有什么办法来解决这个问题吗？

Answer 1

为了让它正常工作，我会做一些调整。

例如,

别名导入可以像import d3Tip from 'd3-tip'一样简单

d3Tip是d3-tip存储库中从索引文件返回的默认函数的别名。

接下来，调用d3Tip以获取tip对象，例如调用d3Tip()以获取您正在使用的var tooltip。

现在，您有了一个tip对象，不再需要调用.tip() :)