为Angular

为Angular,第1张

我在为我的角项目实例化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]模块' d3-tip'不可用!您要么错误拼写了模块名称,要么忘记加载它。如果注册模块,请确保将依赖项指定为第二个参数

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

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

得到了:

  

错误:[$ injector:unpr]未知提供者:d3TipProvider< - d3Tip< - reportChartDirective

那么,这是错的?谢谢!

最佳答案:

2 个答案:

答案 0 :(得分:0)

Angular8 D3v5

我遵循的步骤:

  1. 安装 d3-tip npm i d3-tip

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

  3. 创建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
      })
  1. 调用方法:svg.call(tip)

  2. 事件触发

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

答案 1 :(得分:0)

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

在您的情况下

删除app.js中的d3-tip

运行

  

bower安装d3-tip --save

感谢

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复