在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

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

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>