D3圖表顯示更改選項

我正在嘗試使用d3編寫一個小應用程序。所以，我有一個下拉列表。因爲每個選擇都會給我一個不同的圖表。這裏是我下面的代碼 -D3圖表顯示更改選項

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="project.css"> 
</head> 

<div id="options"> 
    <select id="top10"> 
     <option value="top10">Top 10</option> 
     <option value="top10cities">Top 10 most populated cities</option> 
     <option value="largestislands">Largest Islands</option> 
    </select> 
    <input type="button" value="Submit" id="button"> 
</div> 
<div class = "barChart"></div> 
</body> 
<style> 
.barChart div { 
    font: 10px sans-serif; 
    text-align: right; 
    padding: 20px; 
    margin: 1px; 
    color: white; 
    width: 100%; 
    -webkit-print-color-adjust: exact; 
} 
</style> 
<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script> 
<script src="//d3js.org/d3.v3.min.js"></script> 

<script> 
    $(document).ready(function() { 
    //$(function() { 
// $("#button").click(function() { 
      $("#top10").change(function(){ 
     $(".barChart").hide(); 
     var data = []; 
     if ($("#top10").val() == "largestislands") { 
      data = [{"name":"Greenland", "value":1000000}, {"name":"New Guinea", "value":786000}, {"name":"Borneo", "value":743122}, {"name":"Madagaskar", "value":587041}]; 
     } else { 
       data = [{"name":"Seoul", "value":10229262}, {"name":"Mumbai", "value":9925891}, {"name":"Karachi", "value":9863000}]; 
     } 
     barChart(data); 
     function barChart(data) { 
     var color = d3.scale 
           .ordinal() 
           .range(["green","bisque","red","violet","orange","brown","purple","magenta","cyan","coral" ]); 

         var x = d3.scale.linear().domain(
           [ 0, 1000 ]).range(
           [ 0, 1000 ]); 
         var height = 20; 

//      $(".barChart").hide(); 

         d3 
           .select(".barChart") 
           .selectAll("div") 
           .data(data) 
           .enter() 
           .append("div") 
           .style("width", "1px") 
           .style("height", 
             height * 2 + "px") 
           .style("padding-top", 
             "0.1px") 
           .style("padding", "0.1px") 
           .style("background-color", 
             "black") 

           .append("div") 
           .style({ 
            stroke : "black", 
            "stroke-width" : "2px" 
           }) 
           .style(
             "height", 
             function(d) { 
              return height 
                + "px"; 
             }) 
           .style("font-size", "12px") 
           .style("margin-top", "10px") 
           .style("text-align", "left") 
           .style("color","black") 
           .style("width", 
             function(d) { 
             if ($("#top10").val() == "top10cities") { 
              return (d.value/10000)+ "px";    
             } else { 
              return (d.value/1000)+ "px"; 
             } 
             }) 
           .style(
             "background-color", 
             function(d, i) { 
              return color(i); 
             }) 
           .text(function(d, i) { 
            return data[i].name; 
            //return data[i].label; 
           }) 
           .append("p") 
           .style(
             "margin-top", 
             function(d) { 
              return -height 
                - 5 
                + "px"; 
             }) 
           .style(
             "margin-left", 
             function(d,i) { 
              if ($("#top10").val() == "top10cities") { 
                return (data[i].value/10000)+ "px";    
               } else { 
                return (data[i].value/1000)+ "px"; 
               } 
             }) 

           .style("color", "black") 
           .text(function(d,i) { 
            return data[i].value 
           }); 
       } 
       $(".barChart").show(); 


      }); 
     }); 

    //}); 
</script> 
</html>

的問題是被顯示在同一個圖表，即使我選擇從下拉不同的選擇。圖表不隨選項的變化而改變。任何人都可以請幫我解決這個問題。

來源

2016-03-01 Newbie

你是不是處理'enter'，'update'刪除吧， '退出'模式。開始你的學習[這裏]（https://bost.ocks.org/mike/join/）。 – Mark

變化1：當無選擇這樣更正數據集

通空數組數據。

 var data = [];//when none selected make it empty 
     if ($("#top10").val() == "largestislands") { //data when largest island selected 
     data = [{ 
      "name": "Greenland", 
      "value": 1000000 
     }, { 
      "name": "New Guinea", 
      "value": 786000 
     }, { 
      "name": "Borneo", 
      "value": 743122 
     }, { 
      "name": "Madagaskar", 
      "value": 587041 
     }]; 
     } else if ($("#top10").val() == "top10cities") { //data when largest top 10 cities selected 
     data = [{ 
      "name": "Seoul", 
      "value": 10229262 
     }, { 
      "name": "Mumbai", 
      "value": 9925891 
     }, { 
      "name": "Karachi", 
      "value": 9863000 
     }]; 
     }

變化2：利用exit對datachange

 var sel = d3 
     .select(".barChart") 
     .selectAll("div") 
     .data(data, function(d) { 
     return d.name 
     }); 
    sel.enter() 
     .append("div") 
     .style("width", "1px") 
    ....//make bars 
    //remove old data bars. 
    sel.exit().remove();

工作示例here

來源

2016-03-02 00:36:01 Cyril

D3圖表顯示更改選項

回答

相關問題