4

タイトルで問題を適切に説明していませんでした...申し訳ありません。

D3 Tag Cloud Simple の例に従ってい ます https://github.com/jasondavies/d3-cloud/blob/master/examples/simple.html

ツイート タグ、センチメンタル値、ツイート テキストで構成される JSON ファイルがあります。（抜粋）

var words = [{"word":"disgrace","sentiment":"0.975","tweet":"Wheres Fred the weatherman? \nIn jail #disgrace #dirtyman @MrJimmyCorkhill"},{"word":"dirtyman","sentiment":"0.975","tweet":"Wheres Fred the weatherman? \nIn jail #disgrace #dirtyman @MrJimmyCorkhill"}];

「つぶやき」の値を各「テキスト」要素の「タイトル」要素として使用したいと考えています。ツイートを .words 関数 (または .map、わかりません:s) に入れてこれを実行しようとしましたが、他のデータはそのようにアクセスされますが、「ツイート」データを抽出できません。

var fill = d3.scale.category20();
var words = <?php echo $tweets->getTweetTags(); ?>;

d3.layout.cloud().size([1000, 1000])
.words(words.map(function(d) {
return {text: d.word, size: d.sentiment * 40, tweet: d.tweet};
}))
.rotate(function() { return ~~(Math.random() * 2) * Math.random() * 1; })
.font("Impact")
.fontSize(function(d) { return d.size; })
.on("end", draw)
.start();

function draw(words) {
d3.select("#vis").append("svg")
.attr("width", 1000)
.attr("height", 1000)
.append("g")
.attr("transform", "translate(500,400)")
.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; })
.append("svg:title").text(function(d) { return d.tweet; } );
}

d.tweet は undefined を返します

ツイートを .words または .map 関数で使用できない理由はおそらく理解できます。これらは特定のパラメーターのみを想定しているためですが、「ツイート」データを「タイトル」タグに取得する方法が他にわかりません各「テキスト」要素。

誰でもこれで私を助けることができますか？

編集: d3.json 関数内のコード;

var data; // a global
            d3.json("../../../assets/json/tweetTags.json", function(error, json) {
              if (error) return console.warn(error);
              data = json;

              var fill = d3.scale.category20();

              d3.layout.cloud().size([1000, 1000])
                  .words(data.map(function(d) {
                    return {text: d.word, size: d.sentiment * 40, tweet: d.tweet};
                  }))
                  .rotate(function() { return ~~(Math.random() * 2) * Math.random() * 1; })
                  .font("Impact")
                  .fontSize(function(d) { return d.size; })
                  .on("end", draw)
                  .start();

              function draw(data) {
                d3.select("#vis").append("svg")
                    .attr("width", 1000)
                    .attr("height", 1000)
                  .append("g")
                    .attr("transform", "translate(500,400)")
                  .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; })
                    .append("svg:title").text(function(d) { return d.tweet; } );
              }

              d3.layout.cloud().size([300, 300])
              .data.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();
            });

そのように機能させる方法がわかりません。json ファイルを作成しましたが、データにアクセスしたり、クラウドを実行したりできません。

編集：テキスト要素は現在、終了ボディタグの外側に追加されています:(

var data; // a global
            d3.json("../../../assets/json/tweetTags.json", function(error, json) {
              if (error) return console.warn(error);
              data = json;

              var fill = d3.scale.category20();

             d3.select("#vis").append("svg")
                 .attr("width", 1000)
                 .attr("height", 1000)
                 .append("g")
                 .attr("transform", "translate(500,400)")
                 .data(json)
                 .enter().append("text")
                 .style("font-size", function(d) { return d.sentiment * 40 + "px"; })
                 .style("font-family", "Impact")
                 .style("fill", function(d, i) { return fill(i); })

                 .text(function(d) {return d.word;})
                 .append("svg:title").text(function(d) { return d.tweet; } );

            });

編集：@Chrisこれは、D3 json関数と私のカスタマイズのサンプルコードです

d3.json("../../../assets/json/tweetTags.json", function(error, json) {
  if (error) return console.warn(error);

  var fill = d3.scale.category20();

  d3.layout.cloud().size([600, 500])
      .words(json.map(function(d) {;
            return {text: d.word, size: d.sentiment * 40, tweet: d.tweet};
       }))
      .rotate(function(d) { 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", 600).attr("height", 500)
          .append("g").attr("transform", "translate(350,350)")
          .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; }).append("svg:title")
          .text(function(d) { return d.tweet; } );
      }
})

しかし、描画関数から d.tweet にアクセスできません:s

4

3 に答える 3

8

php の代わりにjson に組み込みのインポート関数を使用することをお勧めします。あなたが抱えている問題は、データの読み取りが非同期であるためwords、クラウドで使用する前に満たされていないことだと思います。

背後にある原則d3.json()は、json がロードされたときに実行されるこの関数ですべてを行うことです。

var data; // a global
d3.json("path/to/file.json", function(error, json) {
  if (error) return console.warn(error);
  data = json;
  visualizeit();
});

編集

動作するはずのコードの例を次に示します。json 関数内にd3 クラウドの例を追加しただけです。

d3.json("../../../assets/json/tweetTags.json", function(error, json) {
  if (error) return console.warn(error);

  var fill = d3.scale.category20();

  d3.layout.cloud().size([300, 300])    
      .words([  // To be replaced with data
        "Hello", "world", "normally", "you", "want", "more", "words",
        "than", "this"].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", 300).attr("height", 300)
          .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; });
      }
})

次に、このバージョンが機能するときに、次のように置き換えることができます.words()。

.words(json.map(function(d) {
  return {text: d.word, size: d.sentiment * 40, tweet: d.tweet};
}))
于 2013-01-22T07:37:18.320 に答える
0

私はsvgコンテナから出てくる単語とまったく同じ問題を抱えていました.translateメソッドで(width/2)に置くoriginという変数を挿入することで解決しました。境界の問題は、投影フィールドの正しい中心を使用する限り、アルゴリズムが内側に保持するように作られているという事実によって引き起こされました。たとえば、幅 = 300、高さ = 300 は原点 = 150 を意味します。お役に立てば幸いです。

于 2013-10-07T14:08:33.443 に答える
0

データの他のエントリを抽出できますか? 例えば、言葉や感情？
たぶん、次のコードのように試すことができます。動作する場合は、コードに変更できます。

var data; // a global
d3.json("path/to/file.json", function(error, json) {
  if (error) return console.warn(error);
  d3.select("#vis").append("svg")
    .data(json)
    .enter().append("text")
    .text(function(d) {return d.tweets;});
});
于 2013-01-22T08:59:25.203 に答える