Question

一个文件名为RateofChange_Table.html

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>

    <title>D3.js Sortable & Responsive Table</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--[if !IE]><!-->
    <style>
    * { 
      margin: 0; 
      padding: 0; 
     }
     body { 
       font: 14px/1.4 Georgia, Serif; 
     }
    #page-wrap {
      margin: 50px;
    }
    p {
     margin: 20px 0; 
    }

    /* 
    Generic Styling, for Desktops/Laptops 
    */
    table { 
        width: 100%; 
        border-collapse: collapse; 
    }
    /* Zebra striping */
    tr:nth-of-type(odd) { 
        background: #eee; 
    }
    th { 
        background: #333; 
        color: white; 
        font-weight: bold; 
        cursor: s-resize;
        background-repeat: no-repeat;
        background-position: 3% center;
    }
    td, th { 
        padding: 6px; 
        border: 1px solid #ccc; 
        text-align: left; 
    }

    th.des:after {
      content: "\21E9";
    }

    th.aes:after {
      content: "\21E7";
    }

    /* 
    Max width before this PARTICULAR table gets nasty
    This query will take effect for any screen smaller than 760px
    and also iPads specifically.
    */
    @media 
    only screen and (max-width: 760px),
    (min-device-width: 768px) and (max-device-width: 1024px)  {

        /* Force table to not be like tables anymore */
        table, thead, tbody, th, td, tr { 
            display: block; 
        }

        /* Hide table headers (but not display: none;, for accessibility) */
        thead tr { 
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        tr { border: 1px solid #ccc; }

        td { 
            /* Behave  like a "row" */
            border: none;
            border-bottom: 1px solid #eee; 
            position: relative;
            padding-left: 50%; 
        }

        td:before { 
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%; 
            padding-right: 10px; 
            white-space: nowrap;
        }

        /*
        Label the data
        */
        td:before {
          content: attr(data-th) ": ";
          font-weight: bold;
          width: 6.5em;
          display: inline-block;
        }
    }

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
        body { 
            padding: 0; 
            margin: 0; 
            width: 320px; }
        }

    /* iPads (portrait and landscape) ----------- */
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
        body { 
            width: 495px; 
        }
    }

    </style>
    <!--<![endif]-->

</head>

<body>

    <div id="page-wrap">

    <h1>D3.js Sortable & Responsive Table</h1>

    <p>Click the table header to sort data according to that column</p>

    </div>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript">
      d3.csv("rate_of_change_table_data.csv", function(error, data) {
          if (error) throw error;

          var sortAscending = true;
          var table = d3.select('#page-wrap').append('table');
          var titles = d3.keys(data[0]);
          var headers = table.append('thead').append('tr')
                           .selectAll('th')
                           .data(titles).enter()
                           .append('th')
                           .text(function (d) {
                                return d;
                            })
                           .on('click', function (d) {
                               headers.attr('class', 'header');

                               if (sortAscending) {
                                 rows.sort(function(a, b) { return b[d] < a[d]; });
                                 sortAscending = false;
                                 this.className = 'aes';
                               } else {
                                 rows.sort(function(a, b) { return b[d] > a[d]; });
                                 sortAscending = true;
                                 this.className = 'des';
                               }

                           });

          var rows = table.append('tbody').selectAll('tr')
                       .data(data).enter()
                       .append('tr');
          rows.selectAll('td')
            .data(function (d) {
                return titles.map(function (k) {
                    return { 'value': d[k], 'name': k};
                });
            }).enter()
            .append('td')
            .attr('data-th', function (d) {
                return d.name;
            })
            .text(function (d) {
                return d.value;
            });
      });
    </script>
</body>

</html>

另一个是rate_of_change_table_data.csv

,All Crime,larceny,simple assault,criminal mischief,controlled substances,burglary,aggravated assault,all other offenses (except traffic),dangerous weapons,disorderly conduct,mv theft,robbery
Section1,-0.14157,-0.13847,0.100487,-0.06366,-0.12794,0.03925,0.012987,-0.5165,-0.34037,0.02991,-0.52017,-0.2976
9 Cameras S1,-0.30844,-0.14458,-0.36111,-0.24528,0.025,-0.17073,-0.58621,-0.40323,-0.25,-0.35294,-0.69565,-0.6
Section3,-0.1052,-0.05516,0.169746,-0.06962,-0.12313,0.247227,-0.04251,-0.48387,-0.41399,0.004566,-0.55111,-0.33976
12 Cameras S3,-0.10158,0.09434,0.139344,-0.04225,-0.13333,0.205882,-0.38462,-0.34483,-0.5,-0.2381,-0.45,-0.36667
Section5,-0.13904,-0.07402,0.206359,-0.08977,-0.22857,0.191805,-0.10837,-0.54693,-0.315,-0.24077,-0.64416,-0.21429
12 Cameras S5,-0.12266,0.401361,0.095652,-0.17391,-0.35652,0.228571,-0.51351,-0.07143,-0.33333,-0.28049,-0.66667,-0.68421
Section7,-0.13998,0.043791,0.033642,-0.1009,-0.18952,-0.01762,-0.03294,-0.4591,-0.31796,-0.11332,-0.61054,-0.2699
33 Cameras S7,-0.26682,0.131868,-0.12971,-0.17333,-0.41935,-0.27711,0.02439,-0.16667,-0.39474,-0.5,-0.57143,-0.60345
Section9,-0.16638,-0.10232,0.033236,-0.19942,-0.0048,-0.2679,-0.06122,-0.49098,-0.23077,0.35443,-0.62776,-0.38147
16 Cameras S9,-0.01553,-0.19694,0.417476,-0.26263,0.2,-0.5641,0.266667,-0.12121,0,1.315315,-0.75,-0.45238
CityWide,-0.13723,-0.06544,0.104105,-0.0949,-0.15562,0.065697,-0.03608,-0.49933,-0.33914,0.016888,-0.58982,-0.28952
ALLCameras (82),-0.15731,-0.02113,0.055696,-0.18065,-0.24905,-0.15948,-0.18894,-0.19617,-0.36145,0.052752,-0.62827,-0.57037

它在本地主机（我使用的MAMP）上运行良好但是当我将它上传到服务器网站时，表格没有显示。（https://ketinglyu.000webhostapp.com/RateofChange_Table.html或https://kentlyu.github.io/js%20plots/RateofChange_Table.html）

D3。 JS在本地工作，但是当我将其上传到托管服务时失败

0 个答案: