D3庫 - 在此示例中如何從JSON訪問數據

Question

我沒有在標題中正確解釋問題...對不起。

我繼D3標籤雲的簡單例子 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"}]; 

我想使用的「鳴叫」的值作爲每個「文本」元件的「標題」元件。 我試圖通過將.weet函數放入.words函數（或.map，我不知道：s）來執行此操作，因爲其他數據是以這種方式訪問​​的，但我無法提取我的'tweet'數據;

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功能，因爲它們只希望某些參數，但我不知道如何將'tweet'數據放入每個「文本」元素的「標題」標籤中。

任何人都可以幫助我嗎？

編輯：代碼與內部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; }); 

      }); 

編輯：@克里斯這是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：■

Answer 1

我建議你應該使用內置的import function for json而不是php。我認爲你遇到的問題是數據的讀取是異步的，因此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(); 
}); 

編輯

下面是應該工作的代碼示例，我在裏面添加了d3 cloud example 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([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}; 
})) 

Answer 2

可以提取數據的其他項？例如言語和情緒？
也許你可以嘗試像下面的代碼。如果有效，您可以將其更改爲您的代碼。

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

Answer 3

我與詞語外出的SVG容器的確切相同的問題，我通過插入可變稱爲原點，我在翻譯方法付諸（寬度/ 2）解決它。邊界問題是由於只要使用正確的投影場中心，例如：寬度= 300，高度= 300，意味着原點= 150，就可以使運動發生在內部。我希望這可以幫助你。