3

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();

私が試した2番目のオプションは、テキストを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 ファイルを読み取る方法を教えてください。ありがとう！

4

1 に答える 1

2

更新:
これを表示できますか?
http://bl.ocks.org/8bb2b55d2c5cf5667b01

d3 および .csv ファイルの作業に慣れる 1 つの方法は、 github でScott Murray のd3-book からコード サンプルを確認することです。(第 12 章は、復習できる場所の 1 つです。) 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>

ファイル構造

于 2013-02-10T05:42:18.127 に答える