使用CSV文件填充下拉列表 - d3

我想使用csv文件中存在的值填充html，中的簡單下拉列表。我嘗試類似的東西，但它不起作用。使用CSV文件填充下拉列表 - d3

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 

</body> 
<script src="http://d3js.org/d3.v3.js"></script> 
<script> 
d3.csv("valuesforDD.csv", function(error, data) { 

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


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

     } 

</script> 

</html>

我應該改變什麼？

謝謝

來源

2014-07-05 user3246812

d3.csv使用CSV文件作爲列名的第一行。您應該確保您的CSV文件看起來像下面這樣：
```
value,label 
1,"Item 1" 
2,"Item 2" 
3,"Item 3" 
```
在attr和text功能訪問數據時，必須使用一個字段名稱。使用上述CSV文件，您可以使用d.value和d.label。

這裏是你的代碼的更新版本根據需要，你應該能夠使用和調整：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
    <script src="http://d3js.org/d3.v3.js"></script> 
    <script> 
    d3.csv("valuesforDD.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.value; }) 
     .text(function (d) { return d.label; }); 
    }); 
    </script> 
</body> 
</html>

來源

2014-07-05 17:47:22

  // just declare the d3 js path and put the following code in script tag, 
      // change the 'billedTo_list' to your p tag as in below code of HTML. 

     <!-- HTML code for select box to populate start here --> 
     <table class="seller-desc reciever-desc"> 
      <tr> 
       <td colspan="2"> 
        <address> 
         <p class="billedTo_list">Billed To</p> 
        </address> 
       </td> 
      </tr> 
      <tr> 
       <td colspan="2"> 
<span class="to-addres"><input id="name" class="billed_firm" type="text" contenteditable value="M/S."></span> 
<span class="to-addres"><input id="name" class="billed_address1" type="text" contenteditable value="Address : "></span><br> 
<span class="to-addres"><input id="name" class="billed_address2" type="text" contenteditable value=""></span><br> 
<span class="to-addres"><input id="name" class="billed_phno" type="text" contenteditable value="Ph. No. : "></span><br> 
<span class="to-addres"><input id="name" class="billed_gstin" type="text" contenteditable value="GSTIN No. : "></span><br> 
       </td> 
      </tr> 
     </table> 
     <!-- HTML code for select box to populate ends here --> 

     <!-- javascript code for select box to populate start here --> 

      // select the place where you want to add your select box 
      var body = d3.select("p.billedTo_list"); 

      // add the select box dynamically to the div or any element of html 
      var menu = body.append("select"); 

      // pass the csv file name here, it may cause error for direct accessing file install the plugin for chrome for external url access 
      d3.csv("example.csv", function(d) { 
       return { 
        rank : d.rank, 
        place : d.place, 
        population : d.population, 
        lat : d.lat, 
        lon : d.lon 
       }; 
      }, function(data) { 
       menu.selectAll("foo") 
       .data(data) 
       .enter() 
       .append("option") 
       .attr("value", d=>d.place) 
       .text(d=>d.place); 

       // on change select box it will show the related values 
       menu.on("change", function() { 
        var selected_value = $('.billedTo_list select').val();      
        $.each(data, function(key, value) { 
         if(value.place == selected_value) { 
          $('.billed_name').val('M/S. ' + value.place); 
          $('.billed_address').val('Address : ' + value.population); 
          $('.billed_phno').val('Ph. No. : ' + value.lat); 
          $('.billed_gstin').val('GSTIN No. : ' + value.lon); 
         } 
        }); 
       }); 
      }); 
     <!-- javascript code for select box to populate start here -->

來源

2017-07-26 12:36:47 Harshal

請添加描述來回答。 @Harshal –

現在檢查代碼...它很容易理解... html代碼頂部和下面的JS代碼多數民衆贊成它... – Harshal

使用CSV文件填充下拉列表 - d3

回答

相關問題