Question

我正在尝试使用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>

问题是即使我从下拉列表中选择了不同的选项，也会显示相同的图表。图表不随选项的变化而变化。任何人都可以帮我解决这个问题。

Answer 1

更改1： 更正您的数据集

当选择 None 时，传递空数组数据。

 meshVolume(v1, f1)

更改2 使用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 }]; }删除datachange上的小节

exit

工作示例here

D3图表显示随选项的变化

1 个答案: