Question

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

我已经使用以下bower.json文件运行了bower install d3-tip安装了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]模块＆＃39; d3-tip＆＃39;不可用！您要么错误拼写了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数

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

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

得到了：

错误：[$ injector：unpr]未知提供者：d3TipProvider＆lt; - d3Tip＆lt; - reportChartDirective

那么，这是错的？谢谢！

Answer 1

你不需要在任何地方注射它。它在我的网站上没有注射的情况下工作。

在您的情况下

删除app.js中的d3-tip

运行

bower安装d3-tip --save

感谢

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

为Angular

2 个答案: