如何在 HTML 表格和 d3 条形图中创建下拉菜单

时间：2021-04-29 15:40:07

标签： javascript html css d3.js

如何创建一个下拉菜单，让用户为此 HTML 表格和 d3 条形图选择时间间隔？我需要在这里创建的时间是：现在、24 小时、48 小时、72 小时、1 周和 1 个月。我对动态表创建和 d3 图表非常陌生。非常感谢您的宝贵帮助。我的代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <style>
        .hide
        {
            display: none;
        }
    </style>
    <button id="showPage1Btn" data-launch-view="page1">View 1</button>
    <button id="showPage2Btn" data-launch-view="page2">View 2</button>
    <button id="showPage3Btn" data-launch-view="page3">View 3</button> 
    <style>
        .bar {
            fill: steelblue;
        }
    </style>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
    <div id="lotOfPages">

    <div class="view" id="page2">
            <h1>View 2</h1>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<style>
    th{ 
        color:#fff;
            }
</style>


<table class="table table-striped">
    <tr  class="bg-info">
        <th>Row Number</th>
        <th>Date</th>
        <th>Time</th>
        <th>Measurement Type</th>
        <th>Value</th>
    </tr>

    <tbody id="myTable">
        
    </tbody>
</table>

<script>
    var myArray = []

   $.ajax({
     method:'GET',
     url:'url',
     success:function(response){
        myArray = response
        buildTable(myArray)
        console.log(myArray)
     }
   })

    function buildTable(data){
        var table = document.getElementById('myTable')

        for (var i = 0; i < data.length; i++){
            var row = `<tr>
                            <td>${i}</td>
                            <td>${data[i].date_time.substring(0, 10)}</td>
                            <td>${data[i].date_time.substring(11, 19)}</td>
                            <td>${Object.keys(data[i])[2]}</td>
                            <td>${data[i].temperature}</td>
                      </tr>`
            table.innerHTML += row


        }
    }

</script>
        </div>
    </div>
    <svg width="1200" height="500"></svg>
<script>

    var svg = d3.select("svg"),
        margin = 200,
        width = svg.attr("width") - margin,
        height = svg.attr("height") - margin

    svg.append("text")
       .attr("transform", "translate(100,0)")
       .attr("x", 50)
       .attr("y", 50)
       .attr("font-size", "24px")
       .text("Temperature")

    var xScale = d3.scaleBand().range([0, width]).padding(0.7),
        yScale = d3.scaleLinear().range([height, 0]);

    var g = svg.append("g")
               .attr("transform", "translate(" + 100 + "," + 100 + ")");

               d3.json('http://webapi19sa-1.course.tamk.cloud/v1/weather/temperature', 
               function(error, data) {
        if (error) {
            throw error;
        }

        xScale.domain(data.map(function(d) { return d.date_time.substring(11, 19); }));
        yScale.domain([0, d3.max(data, function(d) { return d.temperature; })]);

        g.append("g")
         .attr("transform", "translate(0," + height + ")")
         .call(d3.axisBottom(xScale))
         .append("text")
         .attr("y", height - 250)
         .attr("x", width - 100)
         .attr("text-anchor", "end")
         .attr("stroke", "black")
         .text("Time");

        g.append("g")
         .call(d3.axisLeft(yScale).tickFormat(function(d){
             return "°C" + d;
         })
         .ticks(10))
         .append("text")
         .attr("transform", "rotate(-90)")
         .attr("y", 6)
         .attr("dy", "-5.1em")
         .attr("text-anchor", "end")
         .attr("stroke", "black")
         .text("temperature");

        g.selectAll(".bar")
         .data(data)
         .enter().append("rect")
         .attr("class", "bar")
         .attr("x", function(d) { return xScale(d.date_time.substring(11, 19)); })
         .attr("y", function(d) { return yScale(d.temperature); })
         .attr("width", xScale.bandwidth())
         .attr("height", function(d) { return height - yScale(d.temperature); });
    });
</script>
    <script src="app.js"></script>

</body>
</html>

这是我的 app.js 脚本：

$(document).ready(function (e) {

    function showView(viewName) {
        window.location.href = viewName+'.html';
    }

    $('[data-launch-view]').click(function (e) {
        e.preventDefault();
        var viewName = $(this).attr('data-launch-view');
        showView(viewName);
    });

});

这里是 page1.html 文件

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <style>
        .hide
        {
            display: none;
        }
    </style>
    <button id="showPage1Btn" data-launch-view="page1">View 1</button>
    <button id="showPage2Btn" data-launch-view="page2">View 2</button>
    <button id="showPage3Btn" data-launch-view="page3">View 3</button> 
</head>
<body>
    <div id="lotOfPages">

    <div class="view" id="page1">
            <h1>View 1</h1>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<style>
    th{ 
        color:#fff;
            }
</style>


<table class="table table-striped">
    <tr  class="bg-info">
        <th>Row Number</th>
        <th>Date</th>
        <th>Time</th>
        <th>Measurement Type</th>
        <th>Value</th>
    </tr>

    <tbody id="myTable">
        
    </tbody>
</table>

<script>
    var myArray = []

   $.ajax({
     method:'GET',
     url:'url',
     success:function(response){
        myArray = response
        buildTable(myArray)
        console.log(myArray)
     }
   })

    function buildTable(data){
        var table = document.getElementById('myTable')

        for (var i = 0; i < data.length; i++){
            var row = `<tr>
                            <td>${i}</td>
                            <td>${data[i].date_time.substring(0, 10)}</td>
                            <td>${data[i].date_time.substring(11, 19)}</td>
                            <td>${Object.keys(data[i].data)[0]}</td>
                            <td>${data[i].data[Object.keys(data[i].data)[0]]}</td>
                      </tr>`
            table.innerHTML += row


        }
    }

</script>
        </div>
        

    <div class="view hide" id="page3">
            <h1>View 3</h1>
        </div>

    </div>
    <script src="app.js"></script>

</body>
</html>

这里是 page3.html 文件

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <style>
        .hide
        {
            display: none;
        }
    </style>
    <button id="showPage1Btn" data-launch-view="page1">View 1</button>
    <button id="showPage2Btn" data-launch-view="page2">View 2</button>
    <button id="showPage3Btn" data-launch-view="page3">View 3</button> 
    <style>
        .bar {
            fill: steelblue;
        }
    </style>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
    <div id="lotOfPages">

    <div class="view" id="page3">
            <h1>View 3</h1>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<style>
    th{ 
        color:#fff;
            }
</style>


<table class="table table-striped">
    <tr  class="bg-info">
        <th>Row Number</th>
        <th>Date</th>
        <th>Time</th>
        <th>Measurement Type</th>
        <th>Value</th>
    </tr>

    <tbody id="myTable">
        
    </tbody>
</table>

<script>
    var myArray = []

   $.ajax({
     method:'GET',
     url:'url',
     success:function(response){
        myArray = response
        buildTable(myArray)
        console.log(myArray)
     }
   })

    function buildTable(data){
        var table = document.getElementById('myTable')

        for (var i = 0; i < data.length; i++){
            var row = `<tr>
                            <td>${i}</td>
                            <td>${data[i].date_time.substring(0, 10)}</td>
                            <td>${data[i].date_time.substring(11, 19)}</td>
                            <td>${Object.keys(data[i])[2]}</td>
                            <td>${data[i].wind_speed}</td>
                      </tr>`
            table.innerHTML += row


        }
    }

</script>
        </div>
    </div>
    <svg width="1200" height="500"></svg>
<script>

    var svg = d3.select("svg"),
        margin = 200,
        width = svg.attr("width") - margin,
        height = svg.attr("height") - margin

    svg.append("text")
       .attr("transform", "translate(100,0)")
       .attr("x", 50)
       .attr("y", 50)
       .attr("font-size", "24px")
       .text("Wind Speed")

    var xScale = d3.scaleBand().range([0, width]).padding(0.7),
        yScale = d3.scaleLinear().range([height, 0]);

    var g = svg.append("g")
               .attr("transform", "translate(" + 100 + "," + 100 + ")");

               d3.json('url', 
               function(error, data) {
        if (error) {
            throw error;
        }

        xScale.domain(data.map(function(d) { return d.date_time.substring(11, 19); }));
        yScale.domain([0, d3.max(data, function(d) { return d.wind_speed; })]);

        g.append("g")
         .attr("transform", "translate(0," + height + ")")
         .call(d3.axisBottom(xScale))
         .append("text")
         .attr("y", height - 250)
         .attr("x", width - 100)
         .attr("text-anchor", "end")
         .attr("stroke", "black")
         .text("Time");

        g.append("g")
         .call(d3.axisLeft(yScale).tickFormat(function(d){
             return "KM/s" + d;
         })
         .ticks(10))
         .append("text")
         .attr("transform", "rotate(-90)")
         .attr("y", 6)
         .attr("dy", "-5.1em")
         .attr("text-anchor", "end")
         .attr("stroke", "black")
         .text("wind speed");

        g.selectAll(".bar")
         .data(data)
         .enter().append("rect")
         .attr("class", "bar")
         .attr("x", function(d) { return xScale(d.date_time.substring(11, 19)); })
         .attr("y", function(d) { return yScale(d.wind_speed); })
         .attr("width", xScale.bandwidth())
         .attr("height", function(d) { return height - yScale(d.wind_speed); });
    });
</script>
    <script src="app.js"></script>

</body>
</html>

1 个答案:

答案 0 :(得分：0)

        $(document).ready(function (e) {

            function showView(viewName) {
                window.location.href = viewName + '.html';
            }

            $('[data-launch-view]').click(function (e) {
                e.preventDefault();
                var viewName = $(this).attr('data-launch-view');
                showView(viewName);
            });

        });
   
<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <style>
        .hide {
            display: none;
        }
    </style>
    <button id="showPage1Btn" data-launch-view="page1">View 1</button>
    <button id="showPage2Btn" data-launch-view="a">View 2</button>
    <button id="showPage3Btn" data-launch-view="page3">View 3</button>
    <style>
        .bar {
            fill: steelblue;
        }
    </style>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
    <div id="lotOfPages">

        <div class="view" id="page2">
            <h1>View 2</h1>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
                integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
                crossorigin="anonymous">

            <style>
                th {
                    color: #fff;
                }
            </style>


            <table class="table table-striped">
                <tr class="bg-info">
                    <th>Row Number</th>
                    <th>Date</th>
                    <th>Time
                        <select id="seltime" onchange="alert('your selection:  ' + this.value)">
                            <option value="12">12 hours</option>
                            <option value="24">24 hours</option>
                            <option value="48">48 hours</option>
                            <option value="72">72 hours</option>
                            <option value="1 week">1 week</option>
                            <option value="1 month">1 month</option>
                        </select>                        
                        
                        </th>
                    <th>Measurement Type</th>
                    <th>Value</th>
                </tr>

                <tbody id="myTable">

                </tbody>
            </table>

            <script>
                var myArray = []

                $.ajax({
                    method: 'GET',
                    url: 'url',
                    success: function (response) {
                        myArray = response
                        buildTable(myArray)
                        console.log(myArray)
                    }
                })

                function buildTable(data) {
                    var table = document.getElementById('myTable')

                    for (var i = 0; i < data.length; i++) {
                        var row = `<tr>
                            <td>${i}</td>
                            <td>${data[i].date_time.substring(0, 10)}</td>
                            <td>${data[i].date_time.substring(11, 19)}</td>
                            <td>${Object.keys(data[i])[2]}</td>
                            <td>${data[i].temperature}</td>
                      </tr>`
                        table.innerHTML += row


                    }
                }

            </script>
        </div>
    </div>
    <svg width="1200" height="500"></svg>
    <script>

        var svg = d3.select("svg"),
            margin = 200,
            width = svg.attr("width") - margin,
            height = svg.attr("height") - margin

        svg.append("text")
            .attr("transform", "translate(100,0)")
            .attr("x", 50)
            .attr("y", 50)
            .attr("font-size", "24px")
            .text("Temperature")

        var xScale = d3.scaleBand().range([0, width]).padding(0.7),
            yScale = d3.scaleLinear().range([height, 0]);

        var g = svg.append("g")
            .attr("transform", "translate(" + 100 + "," + 100 + ")");

        d3.json('url',
            function (error, data) {
                if (error) {
                    throw error;
                }

                xScale.domain(data.map(function (d) { return d.date_time.substring(11, 19); }));
                yScale.domain([0, d3.max(data, function (d) { return d.temperature; })]);

                g.append("g")
                    .attr("transform", "translate(0," + height + ")")
                    .call(d3.axisBottom(xScale))
                    .append("text")
                    .attr("y", height - 250)
                    .attr("x", width - 100)
                    .attr("text-anchor", "end")
                    .attr("stroke", "black")
                    .text("Time");

                g.append("g")
                    .call(d3.axisLeft(yScale).tickFormat(function (d) {
                        return "°C" + d;
                    })
                        .ticks(10))
                    .append("text")
                    .attr("transform", "rotate(-90)")
                    .attr("y", 6)
                    .attr("dy", "-5.1em")
                    .attr("text-anchor", "end")
                    .attr("stroke", "black")
                    .text("temperature");

                g.selectAll(".bar")
                    .data(data)
                    .enter().append("rect")
                    .attr("class", "bar")
                    .attr("x", function (d) { return xScale(d.date_time.substring(11, 19)); })
                    .attr("y", function (d) { return yScale(d.temperature); })
                    .attr("width", xScale.bandwidth())
                    .attr("height", function (d) { return height - yScale(d.temperature); });
            });
    </script>
    

</body>

</html>

相关问题
最新问题