个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在尝试使用 d3.js 实现响应式词云。我还需要能够更新/更改数据。
有很多基于 Jason Davies 很好的解决方案的例子。我正在尝试调整词云实现 (found here)以满足我的要求。
这是我的代码。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/d3/d3.min.js"></script>
<script type="text/javascript" src="bower_components/d3-cloud/d3.layout.cloud.js"></script>
<script type="text/javascript" src="tags.js"></script>
<body>
<div id="wordcloud">
<div id="vis"></div>
</div>
<script>
var w = window.innerWidth, h = window.innerHeight;
var fontSize;
var layout = d3.layout.cloud()
.timeInterval(Infinity)
.size([w, h])
.fontSize(function(d) {
return fontSize(+d.value);
})
.text(function(d) {
return d.key;
})
.on("end", draw);
var svg = d3.select("#vis").append("svg")
.attr("width", w)
.attr("height", h);
var vis = svg.append("g").attr("transform", "translate(" + [w >> 1, h >> 1] + ")");
update();
if(window.attachEvent) {
window.attachEvent('onresize', update);
}
else if(window.addEventListener) {
window.addEventListener('resize', update);
}
function draw(data, bounds) {
var w = window.innerWidth,
h = window.innerHeight;
// ***
svg.remove();
svg = d3.select("#vis").append("svg")
.attr("width", w)
.attr("height", h);
vis = svg.append("g").attr("transform", "translate(" + [w >> 1, h >> 1] + ")");
// ***
svg.attr("width", w).attr("height", h);
scale = bounds ? Math.min(
w / Math.abs(bounds[1].x - w / 2),
w / Math.abs(bounds[0].x - w / 2),
h / Math.abs(bounds[1].y - h / 2),
h / Math.abs(bounds[0].y - h / 2)) / 2 : 1;
var text = vis.selectAll("text")
.data(data, function(d) {
return d.text.toLowerCase();
});
text.transition()
.duration(1000)
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.style("font-size", function(d) {
return d.size + "px";
});
text.enter().append("text")
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.style("font-size", function(d) {
return d.size + "px";
})
.style("opacity", 1e-6)
.transition()
.duration(1000)
.style("opacity", 1);
text.style("font-family", function(d) {
return d.font;
})
.style("fill", function(d) {
return fill(d.text.toLowerCase());
})
.text(function(d) {
return d.text;
});
vis.transition().attr("transform", "translate(" + [w >> 1, h >> 1] + ")scale(" + scale + ")");
}
function update() {
layout.font('impact').spiral('archimedean');
fontSize = d3.scale['sqrt']().range([10, 100]);
if (tags.length){
fontSize.domain([+tags[tags.length - 1].value || 1, +tags[0].value]);
}
layout.stop().words(tags).start();
}
function changeWords(newTags) {
tags = newTags;
update();
}
</script>
此解决方案适用于整个窗口。但我希望词云显示在 div 内。
当我尝试将 var w = window.innerWidth, h = window.innerHeight; 替换为 var w = $('#wordcloud').innerWidth(), h = $ ('#wordcloud').innerHeight(); 或类似的东西，它不起作用。
在我的实际应用程序中，我想使用这个解决方案，我在其他容器中有一个深度嵌套的 div 。 div 没有明确的宽度和高度。
我在这里缺少什么？
感谢您的帮助。
最佳答案
您必须定义一些有关 div 尺寸的值，无论是内联样式还是 css。例如，整页div:
<div id="wordcloud" style="width:100%; height:100vh; display: block">
<div id="vis"></div>
</div>
将起作用，否则如果任何宽度或高度属性丢失或等于 0，脚本将停止。
关于javascript - 使用 D3.js 的响应式词云，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59361834/
26
4
0
我有以下案例要解决。 在短语中突出显示关键字的 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. 有人可以解释为什么存在这个
我是一名优秀的程序员,十分优秀！