在D3.js中添加列

时间:2016-11-21 21:16:22

标签: javascript d3.js

我正在使用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的图片

enter image description here

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

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

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

在你的循环中,你会多次添加数据集,我不确定这是否是你打算做的。也许考虑一下

.data(dataset)

&#13;
&#13;
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();
&#13;
<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>
&#13;
&#13;
&#13;