D3.js D3图书馆—；在本例中，如何从JSON访问数据

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

下面是D3标签云的简单示例

我有一个JSON文件，由tweet标签、情感值和tweet文本组成； （节选）

我想使用“tweet”值作为每个“text”元素的“title”元素。 我尝试将我的tweet放在.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; } );
}

我不知道如何让它像那样工作。我已经创建了json文件，但现在我无法访问数据或运行云

编辑：文本元素现在附加在结束正文标记的外部：（

Edit:@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; } );
      }
})

---

但是我无法从draw函数访问d.tweet:s

我建议您应该使用内置函数而不是php。我认为您遇到的问题是数据的读取是异步的，因此在云中使用之前不会填充

单词

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

您是否可以提取数据的其他条目？例如文字和情感？

也许你可以像下面的代码一样尝试。如果它有效，你可以将它更改为你的代码

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

我遇到了与svg容器中的单词完全相同的问题，我通过插入一个名为origin的变量（width/2）解决了这个问题在translate方法中。边界问题是由这样一个事实引起的，即只要使用投影字段的正确中心，算法就可以将边界保持在内部，例如：宽度=300，高度=300，这意味着原点=150。我希望这对您有所帮助。
我编辑了代码（见上文）要在d3.json函数中完成所有工作，但我现在正在努力让它生成云：为此，我只能建议您从简单的开始，然后添加选项以实现所需的结果。首先提示，为什么要绘制两个云？但是如果问题不再是json，您应该问其他问题。始终y要有最简单的（和最短的）代码可能会说明您的问题，它通常会导致您自己解决问题。是的，底部的第二个云是一个错误。我会花更多的时间研究这个问题；只是您有空，我不想因为不匆忙而丢掉支持。我使用了您的代码并定制了它，但我正在体验ori无法从draw函数访问tweet数据的主要问题（请参见上面的编辑-编辑：@Chris），因此下面的一行不起作用：
.append（“svg:title”）.text（函数（d）{return d.tweet；}）；
？因此我认为您可以更改它以满足您的要求。您尝试使用words.map（函数（d）{…}）这是一个小问题。因为变量“words”只是一个普通的对象，我认为它的原型中没有map函数。它很乐意帮助您。非常好的帮助Lephix（不排除Chris的帮助），但我不知道如何弄清楚为什么我的'text'元素会附加到'/body'元素之外。也许您应该在将（）新元素输入元素之前重新选择该元素。例如：d3.select（“svg>g”）.data（json）.append（“text”）…因为太多的方法链会混淆您真正处理的对象…如果您认为您的问题已成功回答，您应该接受答案。
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(json.map(function(d) {
  return {text: d.word, size: d.sentiment * 40, tweet: d.tweet};
}))

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