Question

我担心这是从HTML元素构建数组的一个非常基本的Javascript问题。我已经找到了答案，但我认为有一些重要的基础知识没有点击给我，而且我会进入圈子，所以一些外部的，专家的观点将不胜感激！

我们正在使用Moodle运行在线课程，在介绍周，我们希望收集有关数据库模块（例如国家/地区）的用户的一些信息，然后向他们显示组响应。

Moodle给出一个带占位符[[data]]的模板，你可以用html包装，在这种情况下是一个div：

 <div class="country">[[country]]</div>

我遇到的问题是将所有这些div的内容转换为数组。我发现这里解释了这个方法，但我尝试推送/连接似乎不起作用：

var countryList = document.getElementsByClassName("country");    
Array.prototype.forEach.call(countryList, function() {});

我想在数组中使用它的原因是我可以使用Jason Davies的d3.js动力词云将内容推送到现有模板中。 Here's a link to GitHub，以下复制简单云的基本代码以供参考。

基本上我希望能够从HTML元素中创建一个数组，并将它与下面使用的单词数组合起来：

var fill = d3.scale.category20();

d3.layout.cloud().size([300, 300])
  .words([
    "Hello", "world", "normally", "you", "want", "more", "words",
    "than", "this"
  ].map(function(d) {
    return {
      text: d,
      size: 10 + Math.random() * 90
    };
  }))
  .padding(5)
  .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;
    });
}

Answer 1

您应该能够使用以下内容获取所需的数组：

var countryList = document.querySelectorAll('.country');   
var countryNames = Array.prototype.map.call(countryList, function(c){return c.textContent});

使用D3 Wordcloud从html创建数组以显示

1 个答案: