D3库 - 如何在此示例中从JSON访问数据 [英] D3 Library — How To Access Data from JSON in this example

问题描述

我没有在标题中正确解释问题...对不起。

I didn't explain the issue properly in the title... Sorry.

我正在关注D3标签云简单示例
https://github.com/jasondavies/d3-cloud/blob/master /examples/simple.html

I'm following the D3 Tag Cloud Simple example https://github.com/jasondavies/d3-cloud/blob/master/examples/simple.html

我有一个JSON文件，包含tweet标签，感性值和tweet文本;
（excerpt）

I have a JSON file that consists of tweet tags, sentimental values and tweet text; (excerpt)

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"}];

我想使用tweet值作为每个'text'元素的'title' 。
我试图这样做通过把我的tweet在.words函数（或.map，我不知道：s），因为其他数据被访问，但我不能提取我的'tweet'数据;

I want to use the "tweet" value as a 'title' element of each 'text' element. I tried doing this by putting my tweet in the .words function (or .map, I don't know :s), as other data is accessed that way, but I can't extract my 'tweet' data;

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

d.tweet returns undefined

我可能明白为什么我不能在.words或.map函数中使用我的tweet，因为他们只需要一些参数，但是我不知道如何把'tweet'数据放到'每个文本元素的标题标签。

I can probably understand why I can't use my tweet in the .words or .map function, as they only expect certain parameters, but I don't know how else to get the 'tweet' data into the 'title' tags of each 'text' element.

任何人都可以帮助我吗？

Can anyone help me with this?

编辑：带有d3.json函数的代码;

Code with inside d3.json function;

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文件，但现在我无法访问数据或运行云。

I don't know how to get it working in like that. I have made the json file but now I can't access the data or run the cloud.

编辑：文本元素附加在外部的关闭标记现在:(

The text elements are appending outside of the closing body tag now :(

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函数中的示例代码和我的习俗

@Chris This is your exampled code in the D3 json function and with my customisations

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

But I can't access d.tweet from the draw function :s

推荐答案

我建议你使用内置的 json的import函数而不是php。我认为你的问题是数据的读取是异步的，因此词语在填充之前不使用它在云。

I suggest you should use the built-in import function for json instead of php. I think that the problem you have is that the reading of the data is asynchronous, so words is not filled before using it in clouds.

d3.json（）背后的原理是做这个函数中的一切， json被加载：

The principle behind d3.json() is to do everything in this function, which will be executed when the json is loaded:

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

EDIT

这里是一个应该工作的代码示例，我只是添加了 d3 cloud example in the json function。

Here is an example of the code that should work, I just added the d3 cloud example inside the json function.

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

这篇关于D3库 - 如何在此示例中从JSON访问数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！