Javascript D3-来自同一源文件的多个wordclouds
我在尝试使用d3从单一源json创建多个wordclouds时遇到了一些问题 编辑:忘了提一下,我是基于Jason Davies的例子来编写wordclouds的 同一个文件中有,但我找不到任何涉及到为每个图表使用布局模型的内容,就像word cloud layout一样 我想为“结果”对象中的每个项目创建一个单独的wordcloud:Javascript D3-来自同一源文件的多个wordclouds,javascript,svg,d3.js,word-cloud,Javascript,Svg,D3.js,Word Cloud,我在尝试使用d3从单一源json创建多个wordclouds时遇到了一些问题 编辑:忘了提一下,我是基于Jason Davies的例子来编写wordclouds的 同一个文件中有,但我找不到任何涉及到为每个图表使用布局模型的内容,就像word cloud layout一样 我想为“结果”对象中的每个项目创建一个单独的wordcloud: sourcedata = { "results": [ { "category":"spain",
sourcedata = {
"results":
[
{
"category":"spain",
"words":[["i", 190], ["the", 189], ["it", 139], ["you", 134], ["to", 133], ["a", 131]]
},
{
"category":"england",
"words":[["lol", 37], ["on", 36], ["can", 35], ["do", 35], ["was", 33], ["mike", 33], ["but", 31], ["get", 30], ["like", 30]]
},
{
"category":"france",
"words":[["ve", 18], ["make", 18], ["nick", 18], ["soph", 18], ["got", 18], ["he", 17], ["work", 17]]
},
{
"category":"germany",
"words":[["about", 13], ["by", 13], ["out", 13], ["probabl", 13], ["how", 13], ["video", 12], ["an", 12]]
}
]
}
因为每个wordcloud都需要自己的布局模型,所以我尝试使用forEach循环遍历每个类别,为每个类别创建一个模型和“draw”回调方法:
d3.json(sourcedata, function(error, data) {
if (error) return console.warn(error);
data = data.results;
var number_of_charts = data.length;
var chart_margin = 10;
var total_width = 800;
var chart_width_plus_two_margin = total_width/number_of_charts;
var chart_width = chart_width_plus_two_margin - (2 * chart_margin);
data.forEach(function(category) {
svg = d3.select("body")
.append("svg")
.attr("id", category.name)
.attr("width", (chart_width + (chart_margin * 2)))
.attr("height", (chart_width + (chart_margin * 2)))
.append("g")
.attr("transform", "translate(" + ((chart_width/2) + chart_margin) + "," + ((chart_width/2) + chart_margin) + ")");
d3.layout.cloud().size([chart_width, chart_width])
.words(category.words.map(function(d) {
return {text: d[0], size: 10 + (d[1] / 10)};
}))
.padding(5)
.rotate(function() { return ~~(Math.random() * 2) * 90; })
.font("Impact")
.fontSize(function(d) { return 10 + (d[1] * 10); })
.on("end", drawInner)
.start();
function drawInner(words) {
svg.selectAll("text").data(words)
.enter().append("text")
.style("font-size", function(d,i) { return d.size + "px"; })
.style("font-family", "Impact")
.style("fill", function(d, i) { return fill(i); })
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x+(chart_width/2), d.y+(chart_width/2)] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.text; });
}
});
});
但是,当我运行此命令时,每个类别会得到一组svg/g标记,但每个标记只包含一个文本标记,其中只有一个来自该类别的单词,大小为0
非常感谢您的帮助,谢谢
编辑:请参阅我自己的回复以获取固定代码。多亏了马克。盯着这个看了太久。问题在于这一行:
.fontSize(function(d) { return 10 + (d[1] * 10); })
这里的d是从布局中构造的对象,而不是数组条目。这是无声的失败
将其替换为:
.fontSize(function(d) { return d.size; })
另外,检查你的翻译数学。它似乎正在将g
元素移出svg
例如
另一个潜在的陷阱是,由于drawInner
是一个回调,因此它似乎是以异步方式调用的。因此,对drawInner
的多次调用可能会覆盖svg
变量。我会考虑把SVG创建移动到回调内部。一种方法是:
...
.on("end", function(d, i) {
drawInner(d, category.category);
})
.start();
function drawInner(words, name) {
svg = d3.select("body")
.append("svg")
.attr("id", name)
...
这样您仍然可以传入类别名称
更新。感谢Mark的修复-以下是工作代码:
d3.json('./resources/whatsappList.json', function(error, data) {
if (error) return console.warn(error);
var fill = d3.scale.category20(); //added missing fill scale
data = data.results;
var number_of_charts = data.length;
var chart_margin = 10;
var total_width = 800;
var chart_width_plus_two_margin = total_width/number_of_charts;
var chart_width = chart_width_plus_two_margin - (2 * chart_margin);
data.forEach(function(category) {
d3.layout.cloud().size([chart_width, chart_width])
.words(category.words.map(function(d) {
return {text: d[0], size: 10 + (d[1] / 10)};
}))
.padding(5)
.rotate(function() { return ~~(Math.random() * 2) * 90; })
.font("Impact")
.fontSize(function(d) { return d.size; }) //fixed error on size
.on("end", function(d, i) {
drawInner(d, category.category);
})
.start();
function drawInner(words, name) {
svg = d3.select("body")
.append("svg")
.attr("id", name)
.attr("width", (chart_width + (chart_margin * 2)))
.attr("height", (chart_width + (chart_margin * 2)))
.append("g")
.attr("transform", "translate(0,0)") //neutralised pointless translation
.selectAll("text").data(words)
.enter().append("text")
.style("font-size", function(d,i) { return d.size + "px"; })
.style("font-family", "Impact")
.style("fill", function(d, i) { return fill(i); })
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x+(chart_width/2), d.y+(chart_width/2)] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.text; });
}
});
});
@willycs40,请看更新的答案,我在代码中看到了另一个潜在的陷阱。谢谢-是的,我以前尝试过在drawInner中创建svg,以防导致最初的问题。我会回复到这一点,再次感谢您的帮助。