我正在尝试让我d3 wordcloud做出回应。我已经像这样初始化了云:
var cloud = d3.layout.cloud()
.rotate(0)
.font("Open Sans, sans-serif")
.fontWeight(600)
.fontSize(d => {
var size = d.size;
return size;
})
.on("end", (words: any[]) => {
this.text = this.vis.selectAll("text").data(words); // this.vis is the "g" node appended to the svg
var b = this.text.enter().append("text");
b.style("font-size", function (d) { return d.size + "px"; })
.style("fill", (d: any) => "#272C2F")
.attr("transform", function (d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function (d) { return d.text; });
});
当屏幕尺寸发生变化时,我会使用它来更新它:
this.cloud.stop();
this.cloud.size([this.$view.offsetWidth, this.$view.offsetHeight]); // this.$view.offsetWidth and this.$view.offsetWidth call the width and height of the view
this.cloud.words(newlist); // newlist is an array with objects like this { text: string; count: number }
这在第一次运行时效果很好。但它什么也没做。当我查看d3的代码时,我发现它在这个方法中存在问题:
d3_selection_enterPrototype.select = function(selector) {
var subgroups = [], subgroup, subnode, upgroup, group, node;
for (var j = -1, m = this.length; ++j < m; ) {
upgroup = (group = this[j]).update;
subgroups.push(subgroup = []);
subgroup.parentNode = group.parentNode;
for (var i = -1, n = group.length; ++i < n; ) {
if (node = group[i]) {
subgroup.push(upgroup[i] = subnode = selector.call(group.parentNode, node.__data__, i, j));
subnode.__data__ = node.__data__;
} else {
subgroup.push(null);
}
}
}
return d3_selection(subgroups);
};
如果我第一次调用'this',你可以看到它是一个数组,我可以在数组中调用这些值。然而,当我再次运行它(在调整屏幕大小后)时,值突然消失,即使数组仍具有相同的长度。
这是d3中的错误吗?或者我更新云错了吗?