javascript - 为 Angular 设置 d3-tip

我在后面为我的 angular 项目实例化 d3-tip 时遇到了麻烦。
我已经运行 bower install d3-tip ，它安装了 d3-tip 和以下 bower.json 文件:

{
  "name": "d3-tip",
  "version": "0.6.7",
  "main": "index.js",
  "ignore": [
    "**/.*",
    "node_modules",
    "components",
    "bower_components",
    "examples",
    "Makefile",
    "docs"
  ],
  "dependencies": {
    "d3": "3.5.5"
  },
  "homepage": "https://github.com/Caged/d3-tip",
  "_release": "0.6.7",
  "_resolution": {
    "type": "version",
    "tag": "v0.6.7",
    "commit": "07cf158c54cf1686b3000d784ef55d27b095cc0e"
  },
  "_source": "git://github.com/Caged/d3-tip.git",
  "_target": "~0.6.6",
  "_originalSource": "d3-tip"
}

我接下来尝试加入 d3-tip 文档中提供的示例，并收到以下错误:

代码:

/* Initialize tooltip */
tip = d3.tip().attr('class', 'd3-tip').html(function(d) { return d; });

/* Invoke the tip in the context of your visualization */
vis.call(tip)

vis.selectAll('rect')
    .data(data)
.enter().append('rect')
    .attr('width', function() { return x.rangeBand() })
    .attr('height', function(d) { return h - y(d) })
    .attr('y', function(d) { return y(d) })
    .attr('x', function(d, i) { return x(i) })
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide)

然后，认为我需要在我的 angular.module 中实例化 d3-tip，如下所示:

angular.module('d3', []);
angular
    .module('bApp', [
        'ngAnimate',
        'ngCookies',
        'ngResource',
        'ngRoute',
        'ngSanitize',
        'ngTouch',
        'ui.router',
        'ct.ui.router.extras',
        'angularMoment',
        'd3',
        'd3-tip',
        'smart-table',
        'oitozero.ngSweetAlert',
        'ui.select',
        'daterangepicker'
    ])

其中抛出:

我还尝试将 d3-tip 直接注入(inject)我正在使用它的指令中(它被添加为 d3Tip 而不是 d3-tip 因为连字符引发错误):

angular.module('bApp')
  .directive('reportChart', ['d3','$parse', '$state', 'd3Tip', function(d3,$parse,$state,d3Tip) {

并得到:

那么，这里有什么问题呢？谢谢!

最佳答案

我对 Angular8 和 D3v5 有同样的问题

我遵循的步骤:

安装 d3-tip : npm i d3-tip

在要使用工具提示的组件中导入 import d3Tip from "d3-tip"

创建 d3Tip() 的实例

let tip = d3Tip()
      tip
      .attr('class', 'd3-tip')
      .offset([-10, 0])
      .html(function(d) {
        const tooltip =
        `<strong style='color:white'>Freq:</strong> <span style='color:cyan'>${d.frequency} </span>`
        return tooltip
      })

调用方法:svg.call(tip)

事件触发

.on("mouseover",function(d) { tip.show(d, this)})
.on("mouseout",function(d) { tip.hide(d,this )})

关于javascript - 为 Angular 设置 d3-tip，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30765524/