我一直在尝试使用新的D3 v4将一个不错的D3图表示例转换为Angular2组件。
但是,我得到了以下代码“无法读取null的属性文本”异常:
var textLabels = labelGroups.append("text").attr({ x: function (d, i) { var centroid = pied_arc.centroid(d); var midAngle = Math.atan2(centroid[1], centroid[0]); var x = Math.cos(midAngle) * cDim.labelRadius; var sign = (x > 0) ? 1 : -1 var labelX = x + (5 * sign) return labelX; }, y: function (d, i) { var centroid = pied_arc.centroid(d); var midAngle = Math.atan2(centroid[1], centroid[0]); var y = Math.sin(midAngle) * cDim.labelRadius; return y; }, 'text-anchor': function (d, i) { var centroid = pied_arc.centroid(d); var midAngle = Math.atan2(centroid[1], centroid[0]); var x = Math.cos(midAngle) * cDim.labelRadius; return (x > 0) ? "start" : "end"; }, 'class': 'label-text' }).text(function (d, i) { <--------------- exception return d.data.label; });
labelgroups是一个选择,append应该起作用,因此它一定是.attr({})引起问题的原因。但是,它在jsfiddle中确实可以正常工作。D3 v4中的此语法是否已更改?怎么会正确呢?
.attr({})
谢谢!
在D3 v4(以及v5)中,不能使用对象设置attr或style。为此,您必须引用迷你库D3-selection-multi:
attr
style
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
之后,将您的代码从更改attr为attrs(是,就像复数一样):
attrs
var textLabels = labelGroups.append("text").attrs({ //mind the 's' here-------------------------ˆ });
对样式执行相同操作:应styles为复数形式,而不是style。
styles
如果你不想改变这一切,根本就作为“常规”方式:套x,y,text-anchor并class在不同的attr。
x
y
text-anchor
class