javascript - 在 D3.js 中添加列

Question

我正在使用 D3.js 在一行内绘制 4 列，我有三列数据，我想再添加 1 列添加到末尾。我的 html 文件是这样的。

<div class="container"> 
  <div class="feature">
    <div class="row">

    </div>
  </div>
</div>  

我的 Javascript 代码是这样的。

  function calculateNumber(){
    var json_url = "...";
    dataset = []; 
    d3.json(json_url, function(data) {
      dataset.push(intToString(data[0]["num_jobs"]));
      dataset.push(data[0]["cpuhour_tot"]);
      dataset.push(data[0]["cpuhour_tot"]);
        d3.select(".feature .row").selectAll("div")
          .data(dataset)
          .enter()
          .append("div")
          .attr("class", "col-xs-3")
          .text(function(d){ return d});
    });

    new_data = generateStatic();

    d3.select(".feature .row").selectAll("div")
      .data(new_data)
      .enter()
      .append("div")
      .attr("class", "col-xs-3")
      .text(function(d){ return d});
  }  

这段代码完美地添加了 3 列，现在 new_data =generateStatic(); 有了我想要添加的新数据。

数据集和new_dat不同

现在我想添加另一个div..但是代码没有添加任何新的div，只需重写拳头即可。

我包含了标记新 div 必须出现的位置的图像

有什么想法吗？

Answer 1

如果您尝试通过两个类名选择，则需要删除类名和点.之间的空格。

d3.select(".feature.row").selectAll("div")

在您的循环中，您将多次添加数据集，我不确定这是否是您打算做的。也许可以考虑

.data(dataset)

function calculateNumber() {
  dataset = [
    [1, 2, 1],
    [3, 4, 3],
    [5, 6, 5]
  ];

  d3.select(".feature.row")
    .data(dataset)
    .enter()
    .append("div")
    .attr("class", "col-xs-3")
    .text(function(d) {
      return d
    });

};

calculateNumber();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.min.js"></script>
<div class="container">
  <div class="feature">
    <div class="row">
      <div class="col-xs-12 col-sm-3">
        <div class="item_feature">
          <h2>title </h2>
          <div id="resume_data">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>