- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
使用一个简单的示例来处理 nvd3.js ( line with view finder chart )。当我使用基本的单个 html 页面时,我可以让它工作,但是当我在自定义 angularjs 指令中使用它时,它会在 call(chart)
上失败,并出现错误 Uncaught TypeError: Cannot调用链接到 d3.v3.js 的 null 方法“getPropertyValue”
(第 759 行)。
我无法发现代码或变量值的差异。 你能看出我哪里做错了吗? 我应该做什么来进一步调查?
非常感谢。
工作 html:(这是对 d3.json 的调用中的复制/粘贴)
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script src="novus-nvd3-e2dd47b/lib/d3.v3.js"></script>
<script src="novus-nvd3-e2dd47b/nv.d3.js" type="text/javascript">
<script src="novus-nvd3-e2dd47b/src/nv.d3.css" type="text/css">
<link href="novus-nvd3-e2dd47b/src/nv.d3.css" rel="stylesheet" type="text/css">
<script src="novus-nvd3-e2dd47b/src/nv.d3.js"></script>
</head>
<style>
body {
overflow-y:scroll;
}
text {
font: 12px sans-serif;
}
#chart svg {
height: 500px;
margin: 10px;
min-width: 100px;
min-height: 100px;
}
</style>
<body>
<div id="chart">
<svg> </svg>
</div>
<script src="novus-nvd3-e2dd47b/lib/d3.v3.js"></script>
<script src="novus-nvd3-e2dd47b/nv.d3.js"></script>
<script src="novus-nvd3-e2dd47b/src/utils.js"></script>
<script src="novus-nvd3-e2dd47b/src/tooltip.js"></script>
<script src="novus-nvd3-e2dd47b/src/models/legend.js"></script>
<script src="novus-nvd3-e2dd47b/src/models/axis.js"></script>
<script src="novus-nvd3-e2dd47b/src/models/scatter.js"></script>
<script src="novus-nvd3-e2dd47b/src/models/line.js"></script>
<script src="novus-nvd3-e2dd47b/src/models/historicalBar.js"></script>
<script src="novus-nvd3-e2dd47b/src/models/linePlusBarWithFocusChart.js"></script>
<script>
var testdata = d3.json("myjson.json", function(error, myjson) {
nv.addGraph(function() {
var chart = nv.models.lineWithFocusChart();
chart.xAxis
.tickFormat(d3.format('f'));
chart.yAxis
.tickFormat(d3.format(',.2f'));
chart.y2Axis
.tickFormat(d3.format(',.2f'));
console.log('select:', d3.select('#chart svg'));
d3.select('#chart svg')
.datum(myjson)
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
});//end callback
</script>
这是我的自定义 Angular Directive(指令)。代码在调用(图表)时失败。
angular.module('app').directive 'lineChart',
['$log', ($log) ->
restrict: 'AE'
replace: true
scope: { data: '=data' }
link: (scope, element, attrs) ->
testdata = d3.json(scope.data, (error, json_data) ->
nv.addGraph( () ->
chart = nv.models.lineWithFocusChart()
chart.xAxis
.tickFormat(d3.format('f'))
chart.yAxis
.tickFormat(d3.format(',.2f'))
chart.y2Axis
.tickFormat(d3.format(',.2f'))
d3.select(element)
.datum(json_data)
.transition().duration(500)
.call(chart)
nv.utils.windowResize(chart.update)
return chart
)
)
]
我从模板中的 svg
html 元素调用我的指令,如下所示:
div(ng-controller='metricsController')
svg(line-chart, data='json_file')
一些值:d3.select(element) 和 element 看起来像这样:
select:
[Array[1], select: function, selectAll: function, attr: function, classed: function, style: function…]
lineChart.js:21
element:
[svg.[object SVGAnimatedString], context: svg.[object SVGAnimatedString], jquery: "2.0.2", constructor: function, init: function, selector: ""…]
异常是在 d3.v3.js 的这个函数内引发的:
d3_selectionPrototype.style = function(name, value, priority) {
var n = arguments.length;
if (n < 3) {
if (typeof name !== "string") {
if (n < 2) value = "";
for (priority in name) this.each(d3_selection_style(priority, name[priority], value));
return this;
}
if (n < 2) return d3_window.getComputedStyle(this.node(), null).getPropertyValue(name);
Uncaught TypeError: Cannot call method 'getPropertyValue' of null
priority = "";
}
return this.each(d3_selection_style(name, value, priority));
};
最佳答案
我终于明白了。该问题是由于在 Angular 指令中使用 element
造成的。正如我的 Angular 书中所解释的:
“传递给指令的 link
函数的 element
是对 native DOM 元素的包装引用。[...]_这些是您已经使用过的 JQuery 元素如果您需要直接访问原始 DOM 元素,您可以通过使用 element[0]
访问对象的第一个元素来获取它。”
所以我必须使用element[0]
。
关于javascript - 在调用(图表)时,如何调试 "Cannot call method ' getPropertyValue' of null",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17295445/
最近开始学习oracle和sql。 在学习的过程中,我遇到了几个问题,我的 friend 在接受采访时被问到这些问题。 SELECT * FROM Employees WHERE NULL IS N
这个问题在这里已经有了答案: Can we subtract NULL pointers? (4 个回答) 关闭 2 个月前。 是否定义了NULL - NULL? (char *)NULL - (ch
是否有推荐的方法(根据 .net Framework 指南)检查 null,例如: if (value == null) {//code1} else {//code2} 或 if (value !=
我正在尝试将值插入数据库,但出现这样的错误任何人都可以告诉我为什么该值为空,如下所示: An exception occurred while executing 'INSERT INTO perso
这个问题在这里已经有了答案: String concatenation with a null seems to nullify the entire string - is that desire
您好,我正在 Android 联系人搜索模块中工作。我正在查询下方运行。 cur = context.getContentResolver().query(ContactsContract.Data.
下面的 SQL 表定义说明了从我的 MYSQL 数据库创建表的语句之一,该数据库是由我公司的前开发人员开发的。 DROP TABLE IF EXISTS `classifieds`.`category
我主要有应用程序开发背景。在编程语言中 variable == null或 variable != null有效。 当涉及到 SQL 时,以下查询不会给出任何语法错误,但也不会返回正确的结果。 sel
我在尝试检查某些元素是否为 NULL 时遇到段错误或不。任何人都可以帮忙吗? void addEdge(int i, int j) { if (i >= 0 && j > 0)
在 SQL 服务器中考虑到以下事实:Col1 和 Col2 包含数值和 NULL 值 SELECT COALESCE(Col1,Col2) 返回一个错误:“COALESCE 的至少一个参数必须是一个不
在 SQL 服务器中考虑到以下事实:Col1 和 Col2 包含数值和 NULL 值 SELECT COALESCE(Col1,Col2) 返回一个错误:“COALESCE 的至少一个参数必须是一个不
下面查询的关系代数表达式是什么?我找不到“Is Null”的表达式。 SELECT reader.name FROM reader LEFT JOIN book_borrow ON reader.ca
我正在尝试使用三元运算符来检查值是否为 null 并返回一个表达式或另一个。将此合并到 LINQ 表达式时,我遇到的是 LINQ 表达式的 Transact-SQL 转换试图执行“column = n
我在给定的代码中看到了以下行: select(0, (fd_set *) NULL, (fd_set *) NULL, (fd_set *) NULL, &timeout); http://linux
var re = /null/g; re.test('null null'); //> true re.test('null null'); //> true re.test('null null')
这个问题在这里已经有了答案: 关闭 13 年前。 我今天避开了一场关于数据库中空值的激烈辩论。 我的观点是 null 是未指定值的极好指示符。团队中有意见的其他每个人都认为零和空字符串是可行的方法。
由于此错误,我无法在模拟器中运行我的应用: Error:null value in entry: streamOutputFolder=null 或 gradle - Error:null value
我正在尝试在 Android 应用程序中创建电影数据库,但它返回错误。知道这意味着什么吗? public Cursor returnData() { return db.query(TABLE
我一直在检查浏览器中的日期函数以及运行时间 new Date (null, null, null); 在开发工具控制台中,它给出了有效的日期 Chrome v 61 回归 Sun Dec 31 189
为什么 NA==NULL 会导致 logical (0) 而不是 FALSE? 为什么 NULL==NULL 会导致 logical(0) 而不是 TRUE? 最佳答案 NULL 是一个“零长度”对象
我是一名优秀的程序员,十分优秀!