D3メニューコンボボックスに一意の値を返すために

私はcsvファイルでこのデータを持っている：D3メニューコンボボックスに一意の値を返すために

Category,country 
XXX,uk 
XXX,usa 
XXX,usa 
XXX,usa 
XXX,mex 
XXX,ireland 
ZZZ,uk 
ZZZ,uk 
ZZZ,uk 
ZZZ,usa 
ZZZ,aruba 
ZZZ,ireland 
YYY,foo 
YYY,foo

私のコードは、XXX、YYYとZZZための3つのカテゴリのラジオボタンを作成します。ユーザーがラジオをクリックすると、メニューのコンボボックスには、そのカテゴリに関連付けられた固有の国が反映されます。

A（ない！）私はまでよどこの作業例：

<!DOCTYPE html> 
<html> 

<head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <title>comboBoxWithRadios</title> 
    <script src="https://d3js.org/d3.v3.js"></script> 
    <style type="text/css"> 

    #projection-menu { 
     position: absolute; 
     left: 15px; 
     top: 45px; 
    } 

    </style> 
</head> 

<body> 
    <div id="radioDiv"> 
     <label> 
      <input type="radio" name="dataset" id="dataset" value="XXX"> XXX</label> 
     <label> 
      <input type="radio" name="dataset" id="dataset" value="YYY" checked> YYY</label> 
     <label> 
      <input type="radio" name="dataset" id="dataset" value="ZZZ">ZZZ</label> 
    </div> 
    <select id="projection-menu"></select> 
    <script type="text/javascript"> 
    d3.select("input[value=\"YYY\"]").property("checked", true); 
    var exampleCSV = "comboBoxWithRadios.csv" 


    selectDataset(); 

    d3.selectAll("input") 
     .on("change", selectDataset); 

    function selectDataset() { 

     var v = this.value; 
     if (undefined == v) { 
      v = "YYY" 
     } 

     d3.csv(exampleCSV, function(rows) { 
      dta = rows.filter(function(row) { 
       if (row['Category'] == v) { 
        return true; 
       } 
      }); 

      //clear out the combobox 
      removeOptions(document.getElementById("projection-menu")); 

      var menu = d3.select("#projection-menu") 
       .on("change", change); 

      menu.selectAll("option") 
       .data(dta) 
       .enter() 
       .append("option") 
       .text(function(d) { 
        return d.country; 
       }); 
     }); 
    }; 


    function removeOptions(selectbox) { 
     var i; 
     for (i = selectbox.options.length - 1; i >= 0; i--) { 
      selectbox.remove(i); 
     } 
    } 

    function change() { 
     console.log(this.value); 
    }; 


    </script> 
</body> 
</html>

出典

2016-12-02 whytheq

この回答How to select unique values in d3.js from dataと、この修正plunker http://plnkr.co/edit/DtbYRtMb11vhDn2PTecN?p=previewを見てみましょう：http://plnkr.co/edit/6zVkTJvTT3ZXrnELPRnx?p=preview

現在のコードは次のようです。要するに

、

d3.map(dta, function(d){return d.country;}).keys()

を使用して、あなたがユニークな国を取得します。私はこのようにテキストを変更しました：

.text(function(d) { 
        return d; 
       });

希望します！

出典

2016-12-02 09:12:11 mkaran

答えとデモをいただきありがとうございます - それは私が望んでいたとおりに動作します - 私は以前の投稿を見つけましたが、jsの新しいものは実装に問題がありました。私にとっては、キー（）はキーと値のペアを推定していますが、直感的に私は国がキーではないという価値を持っているだろうと私には少し不思議でした。 – whytheq

うれしかった！ [map]（https://github.com/d3/d3-collection/blob/master/README.md#maps）のドキュメントをご覧ください。あなたの例では、 'd3.map（dta、function（d）{return d.country;}）'マップはdを使って辞書を作成します。 .countryは、マップする2番目のパラメータとして渡された関数によって返されるキーとして、{category：country}は値（dtaの現在のアイテムのキーと値のペア）として使用されます。そして、 '.keys（）'はディクショナリの定義キーをリストとして返します。 – mkaran

D3メニューコンボボックスに一意の値を返すために

答えて

関連する問題