Question

我根本不是程序员，虽然我正在尝试使用d3编写wordcloud生成器。我正在网上挖掘示例，到目前为止一切正常，但是目前如果我点击“Make Wordcloud”按钮它只是添加了另一个wordcloud，我希望它更新现有的。虽然，我相信我缺乏完成它的知识。你们能帮忙吗？这是代码：

Fabricator(:my_fabricator) do
  my_first_association
  my_second_association
end

Answer 1

关键在于draw功能。注意第d3.select("#drawing").append("svg")行。这意味着每次调用函数时，它都会添加另一个SVG。现在，虽然您可以创建另一个函数来执行此操作，但通过使用与.data函数关联的函数，它也可以在同一函数内完成：.enter()和{{1 }}

.exit()

关于function draw(words) { var words = d3.select("#drawing").selectAll("svg").data([0]).enter().append("svg") .attr("width", 1000) .attr("height", 500) .append("g") .attr("transform", "translate(500,250)") .selectAll("text") .data(words); words.enter().append("text") .style("font-family", "Expressway") //* .style("fill", function(d, i) { return fill(i); }) *// .attr("text-anchor", "middle") words.style("font-size", function(d) { return d.size + "px"; }) .attr("transform", function(d) { return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; }) .text(function(d) { return d.text; }); words.exit().remove(); }的重点：

此函数使用数组并尝试将该数组与选择提供的对象匹配（在本例中为.data()）。
selectAll("text")仅影响新对象，数组中没有匹配对象的元素（数组元素多于对象）
相反，.enter()会影响没有匹配数组的对象（比数组元素更多的对象）
只需调用.exit()即可影响所有对象。

这样做会创建单词并应用words.<function>和font-family设置，然后使用关联的text-anchor，font-size和{更新所有文字{1}}。最后，它删除了任何现有的单词。

需要有关更新D3.js wordcloud的帮助

1 个答案: