来自外部 .csv 或 .txt 文件的 d3.js 云？答案

【问题标题】：d3.js cloud from external .csv or .txt file?来自外部 .csv 或 .txt 文件的 d3.js 云？
【发布时间】：2013-01-25 11:24:49
【问题描述】：

我正在尝试使用 D3 创建一个词云。为此，我正在修改 Jason Davis 的代码：https://github.com/jasondavies/d3-cloud/blob/master/examples/simple.html

我想更改代码，以便我可以链接到包含大量文本的 .txt 或 .csv 文件，而不是使用单词数组。

我尝试使用 d3.text() 和 d3.csv() 方法，但我做错了。由于两者方法调用 URL，我使用数据 URL 生成器 (http://dataurl.net/#dataurlmaker) 将文本文件转换为 URL。然后我更改了代码并插入了dataurl，如下所示：

var fill = d3.scale.category20();
var text = d3.text(data:text/plain;base64,RGVsbCwgdGhl....continued....more...URLdata)

  d3.layout.cloud().size([300, 300])
  .words(text.map(function(d) {
    return {text: d, size: 10 + Math.random() * 90};
  }))
  .rotate(function() { return ~~(Math.random() * 2) * 90; })
  .font("Impact")
  .fontSize(function(d) { return d.size; })
  .on("end", draw)
  .start();

我尝试的第二个选项是将文本插入到 html 中的脚本标记中，然后在 JS 代码中引用它，如下所示：

<!DOCTYPE html>
<script src="../lib/d3/d3.js"></script>
<script id="text" type="text/plain">Dell, the company, has...more..text...</script>
<script src="../d3.layout.cloud.js"></script>
<body>

<script>
var fill = d3.scale.category20();
var text = d3.select("#text");

  d3.layout.cloud().size([300, 300])
      .words(text.map(function(d) {
        return {text: d, size: 10 + Math.random() * 90};
        }))

etc........

有人可以帮我找出一种读取 .txt 或 .csv 文件的方法吗？谢谢！

【问题讨论】：

标签： javascript text csv d3.js word-cloud

【解决方案1】：

更新：
你能看到这个吗？
http://bl.ocks.org/8bb2b55d2c5cf5667b01

一种熟悉工作 d3 和 .csv 文件的方法是查看github上Scott Murray'sd3-book的代码示例。（第 12 章是您可以回顾的地方。） https://github.com/alignedleft/d3-book/tree/master/chapter_12

无论如何，我在修改后的版本中使用了 us-cities.csv Jason Davies 的 github 示例。

希望这会有所帮助。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>D3 CSV</title>
</head>
<body>

<script src="d3.v3.js"></script>
<script src="cloudlayout.js"></script>
<script type="text/javascript">

var fill = d3.scale.category20();

var cityData = [], 
    width = 500, 
    height = 500;

d3.csv("us-cities.csv", function(data) {
    // build the list of city names
    data.forEach( function (d) {
        cityData.push(d.place);
    });

    d3.layout.cloud().size([500, 500])
        .words(cityData.map(function(d) {
            return {text: d, size: 10 + Math.random() * 90};
        }))
        .rotate(function() { return ~~(Math.random() * 2) * 90; })
        .font("Impact")
        .fontSize(function(d) { return d.size; })
        .on("end", draw)
        .start();
});

function draw(words) {
d3.select("body").append("svg")
    .attr("width", 500)
    .attr("height", 500)
    .append("g")
    .attr("transform", "translate(150,150)")
    .selectAll("text")
    .data(words)
    .enter().append("text")
    .style("font-size", function(d) { 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, d.y] + ")rotate(" + d.rotate + ")";
    })
    .text(function(d) { return d.text; });
}           
</script>
</body>
</html>

【讨论】：

感谢您的帮助。我尝试渲染您粘贴的代码，但无法让它在我的浏览器中显示任何内容。我是 JS 新手，所以也许我的脚本标签有问题？或者是其他东西？这是我的代码：codepad.org/21B1ZJIe 谢谢！
@user1552159 - 您是否能够获取 us-cities.csv 文件并将其保存到您的计算机上？ raw.github.com/alignedleft/d3-book/master/chapter_12/…
是的，我将它保存在与html文件相同的文件中。
是的，我可以。我不明白我做错了什么。我在原始帖子中附上了我的文件结构的屏幕截图（带有突出显示代码的 html 文件）。此外，单词的大小似乎是随机生成的。您是否知道一个词云示例，它生成的词的大小与它们在 .txt 或 .csv 文件中的频率成正比？谢谢！