JSのcsvデータからドロップダウンメニューを作る

よろしくお願いします。私はjavascriptでかなり新しくなっています。私は認めるでしょう。この投稿からかなり分かりました。本当にばかだけど、私はそれに私の指を置くことはできません。JSのcsvデータからドロップダウンメニューを作る

私が作業しているこのCSVファイルの "サブカテゴリ"列の内容をドロップダウンメニューに表示しようとしていますが、空きスペースのドロップダウンリストが表示されます。

私は間違っていますか？ここで[OK]を

d3.csv("PCC.csv", function(error, data) { 

    var select = d3.select("body") 
     .append("div") 
     .append("select") 

    select 
     .on("change", function(d) { 
      var value = d3.select(this).property("value"); 
      alert(value); 
     }); 

    select.selectAll("option") 
     .data(data) 
     .enter() 
     .append("option") 
     .attr("value", function(d) { 
      return d.TPC; 
     }) 
     .text(function(d) { 
      return d.Subcategory; 
     }) 

});

出典

2017-02-13 7rystan

：デモをチェック！ – levi

データは秘密ですので、ここには載せておくことはできませんが、TPCは数字の列です。サブカテゴリは異なるカテゴリの列です – 7rystan

実際のデータを表示するわけではありませんが、配列、オブジェクトの配列、オブジェクトはどのように見えるか... – levi

ここでは、私は何が起こっているのか分かりません。 yを押すと、D3のみを使用してドロップダウンを作成します。

subCategory,TPC 
foo,25 
bar,19 
baz,42

あなたはoption追加入力選択にそのデータをバインドすることができます：あなたのCSVを考える

は、この構造を有しています。データがどのように見えるんか

var body = d3.select("body"); 
 
var data = d3.csvParse(d3.select("#csv").text()); 
 

 
var menu = body.append("select"); 
 

 
menu.selectAll("foo") 
 
    .data(data) 
 
    .enter() 
 
    .append("option") 
 
    .attr("value", d=>d.TPC) 
 
    .text(d=>d.subCategory); 
 

 
menu.on("change", function(){ 
 
    console.log(this.value) 
 
});

pre{ 
 
    display:none; 
 
    }

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<pre id="csv">subCategory,TPC 
 
foo,25 
 
bar,19 
 
baz,42</pre>

出典

2017-02-14 10:25:36

実際に私よりも単純です。 – timat

ありがとう。一般的な規則として、D3を使用する場合、3つの* for *ループは必要ありません。 –

は、すべての例では、（あなただけのD3およびCSVデータへのパスを編集する必要があります..です problemeはコンボを埋めるためにサブカテゴリのように私のために奇妙に見えるれ、一意ではないということでした彼らは、同じサブカテゴリーごとに異なる値に関連付けされている

<!DOCTYPE html> 
<html> 

    <head> 


    <title> stack test </title> 
    <script type="text/javascript" src="d3/d3.v3.min.js"></script> 
     <script type="text/javascript"> 



    window.onload = function() 
     { 
     d3.csv("data/PCC-edit.csv", 

      function(d) { 
       return { 

        TPC: +d.TPC, 
        Subcategory: d.Subcategory 

       }; 
      },  
      function(data) { 
       console.log(data) 
       populate_ComboExample(data) 
      }); 
     } 

     function populate_ComboExample(data) { 

      var example_list= {}; 
      var example_text= {}; 
      console.log(data.length) 
      for (i=0;i<data.length; i++) { // you can calculate the length with js, I choose 10 here for the example 
       example_list[i]=data[i].TPC; 
       example_text[i]=data[i].Subcategory; 
      } 


      var select = document.getElementById("exampleList") 

      for (i=0; i < data.length; i++) { 
       var el = document.createElement("option"); 
       var temp=example_text[i] 
       el.textContent = temp; 
       el.value =example_list[i]; 
       select.appendChild(el); 
      } 
     } 

     function combo_change(thelist) { 

      var idx_1 = thelist.selectedIndex; 
      alert(thelist.options[idx_1].value); 

     } 

    </script> 


    </head> 

    <body> 

    <div class=""> 

    </div> 

    <div id="option"> 

    <form class="comboExample"> 
    <h4>Subcategory</h4> 
    <select name="example_select" id="exampleList" onChange="combo_change(this)"> 
    </select> 
    </form> 


    </div> 


</body> 

</html>

PS：私はD3 V3を使用しますが、D3 v4のために働く必要があります私は、あなたが「はconsole.log」を使用するように助言し、コンソールをチェックします。

出典

2017-02-13 17:56:07 timat

私はあなたのポストから多くを学んだが、私はまだ問題がある。あなたの同じIDなどを使ってみましたが、まだ問題があります。私は "nb_example"と "example_list"を何に置き換えるべきかわからない、私はいつも "そういうものがあり、それは定義されていない"。 – 7rystan

偽のデータを使って再現可能な例があると助けになります。 'nb_example'はあなたの配列の行のnbです。ここで私は10を使用します（私はそれを置き換えることを忘れ、最良の方法はjsで直接計算することです）。 'example_list'については、私の間違いです。私は' var example_list = {};を忘れました。私は投稿を更新しました。 – timat

ああ、それは今すぐに動作！私はオプションとしてNaNを取得しています...私はしかし、私の終わりに何かの感覚がありますか？ここでは、必要に応じて、私が使用しているものに似た編集済みのCSVをアップロードしました。 https://www.dropbox.com/s/24zopp43r3y1ft6/PCC-edit.csv?dl=0 – 7rystan

JSのcsvデータからドロップダウンメニューを作る

答えて

関連する問題