Question

我尝试使用D3在D3项目中的HTML文档上生成一些标题。我可以让D3将数据打印到控制台，但我不知道如何让它显示在我使用的Google表格中的HTML上。基本上，我试图在特定标题下调用特定值，并将该数据值用作标题的文本。数据打印到控制台。我可以手动生成h3标签，但是我很难绑定我的数据并使用输入。

以下是代码：

HTML：

<div class="col-sm-2" id="records">
  <strong>records obtained</strong>
  <div class="col-sm-2" id="records">
    <strong>records obtained</strong>
  </div>
</div>

JavaScript的：

d3.csv("https://docs.google.com/spreadsheets/d/12jMwpmqdbUUfcMHWg2GwGvu-d9BhaJOEsWjK1eoqHRc/pub?output=csv", function(error, data) {
  data.forEach(function(d) {
    d.rqt_count = d.rqt_count;
  });

  console.log(data[1]);

  d3.select("#records")
    .data()
    .enter()
    .append("h3")
    .text(function(d) {
      return d.rqt_count;
    });
});

谢谢！

Answer 1

添加.selectAll('h3')以将新的H3元素与#records相关联。

此外，您需要将data参数传递给data方法：

d3.csv("https://docs.google.com/spreadsheets/d/12jMwpmqdbUUfcMHWg2GwGvu-d9BhaJOEsWjK1eoqHRc/pub?output=csv", 
       function(error, data) {
  d3.select("#records")
    .selectAll('h3')    //ADD THIS
      .data(data)       //CHANGE THIS
      .enter()
      .append("h3")
      .text(function(d) {
        return d.rqt_count;
      });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="col-sm-2" id="records">
  <strong>records obtained</strong>
</div>

D3插入H3标签Google Sheet

1 个答案: