用 d3.wordcloud 重绘词云
Redrawing word cloud with d3.wordcloud
我正在使用 d3.wordcloud (https://github.com/wvengen/d3-wordcloud),我正在尝试擦除当前的词云并在单击按钮时绘制一个新词云。第一次绘制词云时效果很好,但在每次连续绘制时,字体大小变得越来越乱。
这是第一个 运行 和连续几个 运行 之后的样子:
first run
last run
根据观察,我可以看到字体大小的范围在每次 运行 之后都会缩小,最终将每个单词的大小设置为 10 或 100。我相信问题出在函数更新中d3.wordcloud.js,但我不确定如何继续解决这个问题。
function update() {
var words = layout.words();
fontSize = d3.scale[scale]().range([10, 100]);
if (words.length) {
fontSize.domain([+words[words.length - 1].size || 1, +words[0].size]);
}
}
我 运行ning 的代码基于存储库中的 example provided,带有一个用于测试目的的较小字对象和一个用于重绘代码的按钮。
这是一个现场演示:
var test_words = [
{text: 'have', size: 102},
{text: 'Oliver', size: 47},
{text: 'say', size: 46},
{text: 'said', size: 36},
{text: 'bumble', size: 29, href: 'https://en.wikipedia.org/wiki/Beadle'},
{text: 'will', size: 29},
{text: 'Mrs', size: 56, href: 'https://en.wikipedia.org/wiki/Mrs.'},
{text: 'Mann', size: 27, href: 'http://educationcing.blogspot.nl/2012/06/oliver-twist-mrs-manns-character.html'},
{text: 'Mr', size: 27},
{text: 'very', size: 26},
{text: 'child', size: 20},
{text: 'all', size: 19},
{text: 'boy', size: 19},
{text: 'gentleman', size: 19, href: 'http://www.thefreelibrary.com/The+gentleman+in+the+white+waistcoat%3a+Dickens+and+metonymy.-a0154239625'},
{text: 'great', size: 19},
{text: 'take', size: 19},
{text: 'but', size: 18},
{text: 'beadle', size: 16},
{text: 'twist', size: 16},
{text: 'board', size: 15},
{text: 'more', size: 15},
{text: 'one', size: 15}
];
d3.wordcloud()
.size([600, 275])
.transitionDuration(1000)
.fill(d3.scale.ordinal().range(["#884400", "#448800", "#888800", "#444400"]))
.words(test_words)
.onwordclick(function(d, i) {
if (d.href) { window.location = d.href; }
})
.start();
d3.select('#dataset-picker').selectAll('.dataset-button')
.on("click", function() {
//clear the wordcloud div
document.getElementById("wordcloud").innerHTML = "";
var a2 = d3.wordcloud()
.size([600, 275])
.transitionDuration(1000)
.fill(d3.scale.ordinal().range(["#884400", "#448800", "#888800", "#444400"]))
.words(test_words)
.onwordclick(function(d, i) {
if (d.href) { window.location = d.href; }
})
.start();
});
<html>
<head>
<meta charset="UTF-8">
<title>Word Cloud</title>
<script src="https://cdn.rawgit.com/wvengen/d3-wordcloud/master/lib/d3/d3.js"></script>
<script src="https://cdn.rawgit.com/wvengen/d3-wordcloud/master/lib/d3/d3.layout.cloud.js"></script>
<script src="https://cdn.rawgit.com/wvengen/d3-wordcloud/master/d3.wordcloud.js"></script>
<!-- <script src="test_words.js"></script> -->
</head>
<body style="text-align: center">
<h1>Word Cloud</h1>
<div id='wordcloud'></div>
<div id="dataset-picker">
<input id ="test" value="test" class="dataset-button" type="button">
</div>
</body>
</html>
谢谢。
这有点棘手。 d3-wordcloud
plugin (more exactly the underlying d3.layout.cloud
插件)将修改您输入的单词数据集以适应单词的大小。
慢慢地,某些单词会越来越大,而其他单词会越来越小。
为避免这种情况,您可以在每次使用 deep copy
原始数据集创建新云时提供该插件。这样原始数据集始终保持不变:
这是一种使用 javascript 深度复制 json 的方法:
function deepCopy(oldValue) {
var newValue
strValue = JSON.stringify(oldValue)
return newValue = JSON.parse(strValue)
}
您以这种方式传递给 wordcloud 插件:
.words(deepCopy(test_words))
这是一个演示:
var test_words = [
{text: 'have', size: 102},
{text: 'Oliver', size: 47},
{text: 'say', size: 46},
{text: 'said', size: 36},
{text: 'bumble', size: 29, href: 'https://en.wikipedia.org/wiki/Beadle'},
{text: 'will', size: 29},
{text: 'Mrs', size: 56, href: 'https://en.wikipedia.org/wiki/Mrs.'},
{text: 'Mann', size: 27, href: 'http://educationcing.blogspot.nl/2012/06/oliver-twist-mrs-manns-character.html'},
{text: 'Mr', size: 27},
{text: 'very', size: 26},
{text: 'child', size: 20},
{text: 'all', size: 19},
{text: 'boy', size: 19},
{text: 'gentleman', size: 19, href: 'http://www.thefreelibrary.com/The+gentleman+in+the+white+waistcoat%3a+Dickens+and+metonymy.-a0154239625'},
{text: 'great', size: 19},
{text: 'take', size: 19},
{text: 'but', size: 18},
{text: 'beadle', size: 16},
{text: 'twist', size: 16},
{text: 'board', size: 15},
{text: 'more', size: 15},
{text: 'one', size: 15}
];
function deepCopy(oldValue) {
var newValue
strValue = JSON.stringify(oldValue)
return newValue = JSON.parse(strValue)
}
var cloud = d3.wordcloud()
.size([500, 275])
.transitionDuration(1000)
.fill(d3.scale.ordinal().range(["#884400", "#448800", "#888800", "#444400"]))
.words(deepCopy(test_words))
.onwordclick(function(d, i) {
if (d.href) { window.location = d.href; }
})
.start();
d3.select('#dataset-picker').selectAll('.dataset-button')
.on("click", function() {
//clear the wordcloud div
// cloud.remove();
document.getElementById("wordcloud").innerHTML = "";
var cloud = d3.wordcloud()
.size([500, 275])
.transitionDuration(1000)
.fill(d3.scale.ordinal().range(["#884400", "#448800", "#888800", "#444400"]))
.words(deepCopy(test_words))
.onwordclick(function(d, i) {
if (d.href) { window.location = d.href; }
})
.start();
});
<html>
<head>
<meta charset="UTF-8">
<title>Word Cloud</title>
<script src="https://cdn.rawgit.com/wvengen/d3-wordcloud/master/lib/d3/d3.js"></script>
<script src="https://cdn.rawgit.com/wvengen/d3-wordcloud/master/lib/d3/d3.layout.cloud.js"></script>
<script src="https://cdn.rawgit.com/wvengen/d3-wordcloud/master/d3.wordcloud.js"></script>
</head>
<body style="text-align: center">
<h1>Word Cloud</h1>
<div id='wordcloud'></div>
<div id="dataset-picker">
<input id ="test" value="test" class="dataset-button" type="button">
</div>
</body>
</html>
我正在使用 d3.wordcloud (https://github.com/wvengen/d3-wordcloud),我正在尝试擦除当前的词云并在单击按钮时绘制一个新词云。第一次绘制词云时效果很好,但在每次连续绘制时,字体大小变得越来越乱。
这是第一个 运行 和连续几个 运行 之后的样子:
first run
last run
根据观察,我可以看到字体大小的范围在每次 运行 之后都会缩小,最终将每个单词的大小设置为 10 或 100。我相信问题出在函数更新中d3.wordcloud.js,但我不确定如何继续解决这个问题。
function update() {
var words = layout.words();
fontSize = d3.scale[scale]().range([10, 100]);
if (words.length) {
fontSize.domain([+words[words.length - 1].size || 1, +words[0].size]);
}
}
我 运行ning 的代码基于存储库中的 example provided,带有一个用于测试目的的较小字对象和一个用于重绘代码的按钮。
这是一个现场演示:
var test_words = [
{text: 'have', size: 102},
{text: 'Oliver', size: 47},
{text: 'say', size: 46},
{text: 'said', size: 36},
{text: 'bumble', size: 29, href: 'https://en.wikipedia.org/wiki/Beadle'},
{text: 'will', size: 29},
{text: 'Mrs', size: 56, href: 'https://en.wikipedia.org/wiki/Mrs.'},
{text: 'Mann', size: 27, href: 'http://educationcing.blogspot.nl/2012/06/oliver-twist-mrs-manns-character.html'},
{text: 'Mr', size: 27},
{text: 'very', size: 26},
{text: 'child', size: 20},
{text: 'all', size: 19},
{text: 'boy', size: 19},
{text: 'gentleman', size: 19, href: 'http://www.thefreelibrary.com/The+gentleman+in+the+white+waistcoat%3a+Dickens+and+metonymy.-a0154239625'},
{text: 'great', size: 19},
{text: 'take', size: 19},
{text: 'but', size: 18},
{text: 'beadle', size: 16},
{text: 'twist', size: 16},
{text: 'board', size: 15},
{text: 'more', size: 15},
{text: 'one', size: 15}
];
d3.wordcloud()
.size([600, 275])
.transitionDuration(1000)
.fill(d3.scale.ordinal().range(["#884400", "#448800", "#888800", "#444400"]))
.words(test_words)
.onwordclick(function(d, i) {
if (d.href) { window.location = d.href; }
})
.start();
d3.select('#dataset-picker').selectAll('.dataset-button')
.on("click", function() {
//clear the wordcloud div
document.getElementById("wordcloud").innerHTML = "";
var a2 = d3.wordcloud()
.size([600, 275])
.transitionDuration(1000)
.fill(d3.scale.ordinal().range(["#884400", "#448800", "#888800", "#444400"]))
.words(test_words)
.onwordclick(function(d, i) {
if (d.href) { window.location = d.href; }
})
.start();
});
<html>
<head>
<meta charset="UTF-8">
<title>Word Cloud</title>
<script src="https://cdn.rawgit.com/wvengen/d3-wordcloud/master/lib/d3/d3.js"></script>
<script src="https://cdn.rawgit.com/wvengen/d3-wordcloud/master/lib/d3/d3.layout.cloud.js"></script>
<script src="https://cdn.rawgit.com/wvengen/d3-wordcloud/master/d3.wordcloud.js"></script>
<!-- <script src="test_words.js"></script> -->
</head>
<body style="text-align: center">
<h1>Word Cloud</h1>
<div id='wordcloud'></div>
<div id="dataset-picker">
<input id ="test" value="test" class="dataset-button" type="button">
</div>
</body>
</html>
谢谢。
这有点棘手。 d3-wordcloud
plugin (more exactly the underlying d3.layout.cloud
插件)将修改您输入的单词数据集以适应单词的大小。
慢慢地,某些单词会越来越大,而其他单词会越来越小。
为避免这种情况,您可以在每次使用 deep copy
原始数据集创建新云时提供该插件。这样原始数据集始终保持不变:
这是一种使用 javascript 深度复制 json 的方法:
function deepCopy(oldValue) {
var newValue
strValue = JSON.stringify(oldValue)
return newValue = JSON.parse(strValue)
}
您以这种方式传递给 wordcloud 插件:
.words(deepCopy(test_words))
这是一个演示:
var test_words = [
{text: 'have', size: 102},
{text: 'Oliver', size: 47},
{text: 'say', size: 46},
{text: 'said', size: 36},
{text: 'bumble', size: 29, href: 'https://en.wikipedia.org/wiki/Beadle'},
{text: 'will', size: 29},
{text: 'Mrs', size: 56, href: 'https://en.wikipedia.org/wiki/Mrs.'},
{text: 'Mann', size: 27, href: 'http://educationcing.blogspot.nl/2012/06/oliver-twist-mrs-manns-character.html'},
{text: 'Mr', size: 27},
{text: 'very', size: 26},
{text: 'child', size: 20},
{text: 'all', size: 19},
{text: 'boy', size: 19},
{text: 'gentleman', size: 19, href: 'http://www.thefreelibrary.com/The+gentleman+in+the+white+waistcoat%3a+Dickens+and+metonymy.-a0154239625'},
{text: 'great', size: 19},
{text: 'take', size: 19},
{text: 'but', size: 18},
{text: 'beadle', size: 16},
{text: 'twist', size: 16},
{text: 'board', size: 15},
{text: 'more', size: 15},
{text: 'one', size: 15}
];
function deepCopy(oldValue) {
var newValue
strValue = JSON.stringify(oldValue)
return newValue = JSON.parse(strValue)
}
var cloud = d3.wordcloud()
.size([500, 275])
.transitionDuration(1000)
.fill(d3.scale.ordinal().range(["#884400", "#448800", "#888800", "#444400"]))
.words(deepCopy(test_words))
.onwordclick(function(d, i) {
if (d.href) { window.location = d.href; }
})
.start();
d3.select('#dataset-picker').selectAll('.dataset-button')
.on("click", function() {
//clear the wordcloud div
// cloud.remove();
document.getElementById("wordcloud").innerHTML = "";
var cloud = d3.wordcloud()
.size([500, 275])
.transitionDuration(1000)
.fill(d3.scale.ordinal().range(["#884400", "#448800", "#888800", "#444400"]))
.words(deepCopy(test_words))
.onwordclick(function(d, i) {
if (d.href) { window.location = d.href; }
})
.start();
});
<html>
<head>
<meta charset="UTF-8">
<title>Word Cloud</title>
<script src="https://cdn.rawgit.com/wvengen/d3-wordcloud/master/lib/d3/d3.js"></script>
<script src="https://cdn.rawgit.com/wvengen/d3-wordcloud/master/lib/d3/d3.layout.cloud.js"></script>
<script src="https://cdn.rawgit.com/wvengen/d3-wordcloud/master/d3.wordcloud.js"></script>
</head>
<body style="text-align: center">
<h1>Word Cloud</h1>
<div id='wordcloud'></div>
<div id="dataset-picker">
<input id ="test" value="test" class="dataset-button" type="button">
</div>
</body>
</html>