为角设置d3-尖端
为角设置d3-尖端
提问于 2015-06-10 19:26:05
我在为我的角度项目实例化D3-尖端时遇到了麻烦。
我运行了bower install d3-tip，它使用以下bower.json文件安装了d3技巧：
{
"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.提示不是一个函数
代码：
/* 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提示，如下所示：
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提示： 错误：$injector:nomod模块“d3-提示”不可用！您要么拼错了模块名，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。
我还尝试将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
Stack Overflow用户
发布于 2019-11-18 11:31:34
我对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 )})Stack Overflow用户
发布于 2016-01-22 11:07:08
你不需要在任何地方注射。不需要在我的网站上注射就可以了。
在您的情况下删除app.js中的d3-技巧
快跑
bower安装d3-提示-保存
谢谢
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30765524
复制相关文章
相似问题
腾讯云开发者
