- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在尝试使用 d3 从单个源 json 创建多个词云时遇到了一些问题。
编辑:忘了说,我是基于 Jason Davies 的例子,here .
有various guides for creating small multiples来自同一个文件,但我找不到任何涉及为每个图表使用布局模型的内容,就像词云布局的情况一样。
我想为“结果”对象中的每个项目制作一个单独的词云:
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]]
}
]
}
由于每个词云都需要它自己的布局模型,我尝试使用 forEach 循环遍历每个类别,为每个类别创建一个模型和“绘制”回调方法:
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
中移出。
示例 here .
另一个潜在的陷阱是,由于 drawInner
是一个回调,它似乎是以异步方式调用的。因此,svg
变量有可能被多次调用 drawInner
覆盖。我会考虑将 svg 创建移动到回调内部。一种方法是:
...
.on("end", function(d, i) {
drawInner(d, category.category);
})
.start();
function drawInner(words, name) {
svg = d3.select("body")
.append("svg")
.attr("id", name)
...
这样你仍然可以传入类别名称。
已更新 example .
关于javascript - D3 - 来自同一源文件的多个词云,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28532211/
我有以下案例要解决。 在短语中突出显示关键字的 Javascript 方法。 vm.highlightKeywords = (phrase, keywords) => { keywords =
我要匹配文本中的所有美元符号单词。例如,"Hello $VARONE this is $VARTWO"可以匹配$VARONE和$VARTWO。 正则表达式应该是/\$(\w+)/g,但是当我在Dart
在 redux 中,对于将状态作为参数、更改状态并返回新状态的特定操作,您会在 switch 语句中调用什么函数? function reducer(state = DEFAULT_STATE, ac
在 MySQL 5.1 中,我将一个字段命名为“Starting”。但是,每次我使用 SQL 查询时,它都会说无效的 SQL 语法。经过一些谷歌搜索,我发现 STARTING 是一个保留的 SQL 词
我必须使用函数 isIn(secretWord,lettersGuessed) 从列表中找到密码。在下面发布我的代码。 def isWordGuessed(secretWord, lettersGue
一段时间以来,我一直无法找到两个字符串中最长的常用词。首先我想到了用“isspace”函数来做这件事,但不知道如何找到一个常用词。然后我想到了“strcmp”,但到目前为止我只能比较两个字符串。我在想
我目前正在尝试制作一种“单词混合器”:对于两个给定的单词和指定的所需长度,程序应返回这两个单词的“混合”。然而,它可以是任何类型的混合:它可以是第一个单词的前半部分与第二个单词的后半部分相结合,它可以
如果 After 之后(逗号之前)没有 -ing 词,我想匹配它。所以 After 和逗号之间不应该有 -ing 词。 所需的匹配项(粗体): After sitting down, he began
我一直在试验 Stanford NLP 工具包及其词形还原功能。我很惊讶它如何使一些词词形还原。例如: depressing -> depressing depressed -> depressed
js 并尝试根据 [这里] 中的示例代码来做词云:https://github.com/jasondavies/d3-cloud .我想做的是单词的字体大小是基于数组中单词的频率。例如我有 [a,a,
我正在处理一个文本分类问题(在法语语料库上),并且正在试验不同的词嵌入。我对 ConceptNet 提供的内容非常感兴趣,所以我决定试一试。 我无法为我的特定任务找到专门的教程,所以我听取了他们的建议
当我在文本中搜索时,我输入 C-s,然后输入单词,然后一次又一次地输入 C-s,光标前进到找到的单词的下一个位置。问题是,一旦我转到下一个单词,我无法在按钮处编辑迷你缓冲区中的搜索单词,如果我按 Ba
我正在尝试按照以下结构运行这个 maven Hello Word: ├── pom.xml └── src └── Main.java 使用pom.xml设置: 4.0.0
所以,从我可以开始的.. 我正在使用 OCR。该脚本非常适合我的需要。它检测单词的准确性对我来说还可以。 这是结果:附加图像 100% 准确。 from PIL import Image import
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。 想要改善这个问题吗?更新问题,以便将其作为on-topi
这是细节,但我想知道为什么会这样。 示例代码: Class klasa = Enum.class; for(Type t : klasa.getGenericInterfaces()) Syst
我在用: var header = ""+ "Export HTML to Word Document with JavaScript"; var footer = ""; /
我有一个程序可以像这样将数据打印到控制台(以空格分隔): variable1 value1 variable2 value2 variable3 value3 varialbe4 value4 编辑:
我有一个程序可以像这样将数据打印到控制台(以空格分隔): variable1 value1 variable2 value2 variable3 value3 varialbe4 value4 编辑:
最近我在查看与goliath相关的一些代码时,偶然在Ruby代码中看到了这个词use。 , 中间件等。看起来它不同于include/extend, and require. 有人可以解释为什么存在这个
我是一名优秀的程序员,十分优秀!