2016-11-21 13 views
0

私はD3.jsを使って4列の行を描画しています.3列のデータがあり、1を追加して最後を追加します。私のhtmlファイルはこのようなものです。D3.jsの列を追加

<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

selectを2つのクラス名で試してみると、クラス名とドット.の間のスペースを削除する必要があります。

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>

+0

おかげ@Maximilianピーターズ私は質問を更新し検討してください。私はtheree divを作成し、他のものを追加したいが、コードは最初のdivを書き換え、新しいものを作成せず、las divに追加するデータはfisrtのものとは異なる – Stone

関連する問題