为 Angular 设置 d3-tip答案

【问题标题】：Setting up d3-tip for Angular为 Angular 设置 d3-tip
【发布时间】：2015-08-26 05:56:20
【问题描述】：

我在为我的 Angular 项目实例化 d3-tip 时遇到了麻烦。

我运行了bower install d3-tip，它使用以下 bower.json 文件安装了 d3-tip：

{
  "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 文档中提供的示例，并收到以下错误：

TypeError: 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'
    ])

哪个扔了：

错误：[$injector:modulerr] 无法实例化模块 d3-tip，原因是：

错误：[$injector:nomod] 模块“d3-tip”不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数

我还尝试将 d3-tip 直接注入到我使用它的指令中（它被添加为 d3Tip 而不是 d3-tip，因为连字符会引发错误）：

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

得到：

错误：[$injector:unpr] 未知提供者：d3TipProvider

那么，这里有什么问题吗？谢谢！

【问题讨论】：

它看起来不像 d3-tip 是一个角度模块......所以你不能将它作为一个模块注入你的应用程序。您的 d3 和 d3-tip js 文件包含在 index.html?
是的，<script src="bower_components/d3/d3.js"></script> <script src="bower_components/d3-tip/index.js"></script> d3 根本不是问题...d3-tip 以同样的方式包含在其中

标签： javascript angularjs d3.js

【解决方案1】：

你不需要在任何地方注入它。它在我的网站上无需注射即可工作。

在您的情况下删除 app.js 中的 d3-tip

直接运行

凉亭安装 d3-tip --save

谢谢

【讨论】：

【解决方案2】：

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 )})

【讨论】：