首页 > 解决方案 > 条形图的工具提示在角度中使用 d3-tip?

问题描述

我使用 d3.js 以角度创建了条形图,但现在我想要它的工具提示。我使用命令“npm install d3-tip”安装了 d3-tip,并将这个包导入为“import * as d3Tip from 'd3-tip'”。但它向我显示以下错误,“d3_tip__WEBPACK_IMPORTED_MODULE_3__.tip 不是函数”。

我的工具提示代码如下

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

var tip = d3Tip.tip.attr('class', 'd3-tip').html(function(d) { return d; });

var tip = d3.tip().attr('class', 'd3-tip').html(function(d) { return d; })
svg.call(tip);

g.selectAll(".bar")
    .data(data)
    .on("mouseover", function() {
        d3.select(this)
          .attr("fill", "red");
     })
     .on("mouseout", function(d, i) {
        d3.select(this).attr("fill", function() {
            return "" + d.partNumber + "";
        });
     })
     .enter().append("rect")
       .attr("class", "bar")
       .attr("x", function(d) { return x(d.partNumber); })
       .attr("y", function(d) { return y(d.value); })
       .attr("width", x.bandwidth())
       .attr("height", function(d) { return height - y(d.value)
    });

有人可以帮忙吗?

标签: javascriptangulard3.js

解决方案


推荐阅读