如何在d3表的每一行附加一个复选框

时间:2015-09-15 06:44:02

标签: javascript jquery d3.js datatables

我的代码(index.html):

    <!DOCTYPE html>
    <meta charset='utf-8'>
    <html>
      <head>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

    <script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>

    <script type="text/javascript" src="https://raw.githubusercontent.com/mpryvkin/Plugins/master/pagination/simple_numbers_no_ellipses.js"></script>

    <link rel='stylesheet' href='style.css'>
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">


      <script>

      $(document).ready(function() {
        $('#example').DataTable( {
            "pagingType": "full_numbers"
        } );
    } );
    </script>

      </head>
      <body>
    <table id="example" class="display" cellspacing="0" width="100%">
    </table>
       <script>
      var tabulate = function (data,columns) {
      var table = d3.select('#example')
        var thead = table.append('thead')
        var tbody = table.append('tbody')

        thead.append('tr')
          .selectAll('th')
            .data(columns)
            .enter()
          .append('th')
            .text(function (d) { return d })

        var rows = tbody.selectAll('tr')
            .data(data)
            .enter()
          .append('tr')

        var cells = rows.selectAll('td')
            .data(function(row) {
                return columns.map(function (column) {
                    return { column: column, value: row[column] }
              })
          })
          .enter()
        .append('td')
          .text(function (d) { return d.value })

      return table;
    }

    d3.csv('some1.csv',function (data) {
        var columns = ['client_ip']
      tabulate(data,columns)
    })
      </script>
      </body>
    </html>

some1.csv:

    client_ip
    "192.168.7.123"
    "192.168.7.102"
    "192.168.7.83"
    "192.168.7.80"
    "192.168.7.74"
    "192.168.7.100"
    "192.168.7.25"
    "192.168.7.20"
    "192.168.7.89"
    "192.168.7.92"
    "192.168.7.78"
    "192.168.7.12"
    "192.168.7.15"
    "192.168.7.18"
    "192.168.7.22"

我想添加多选框。所以选定的client_ip应存储在一个div中。

有人可以就此问题向我提出建议吗?

0 个答案:

没有答案