javascript - 将 MySQL 数据传递给 Javascript

Question

我的表中有一些 MySQL 数据。此表显示数据如何相互连接。我也有每个数据的按钮。我想形象化这些关系。我正在使用 vis.js 进行可视化。我是 Javascript 的新手，我不知道如何将 MySQL 数据传递给 function drawNetwork()。我该怎么做？

例子

function drawNetwork() {

  var nodes = [{
      id: 1,
      label: 'data1',
      shape: 'box'
    },
    {
      id: 2,
      label: 'data2',
      shape: 'box'
    },
    {
      id: 3,
      label: 'data3',
      shape: 'box'
    },
    {
      id: 4,
      label: 'data4',
      shape: 'box'
    }
  ];

  var edges = [{
      from: 1,
      to: 2,
      label: 'Description1',
      arrows: {
        to: true
      }
    },
    {
      from: 1,
      to: 3,
      label: 'Description2',
      font: {
        align: 'top'
      },
      arrows: {
        to: true
      }
    },
    {
      from: 1,
      to: 4,
      label: 'Description3',
      font: {
        align: 'top'
      },
      arrows: {
        to: true
      }
    }
  ];

  var container = document.getElementById('network-container');

  var data = {
    nodes: nodes,
    edges: edges
  };

  var width = 600;
  var height = 500;
  var options = {
    width: width + 'px',
    height: height + 'px',
    edges: {
      smooth: false
    },
    physics: false,
    interaction: {
      hover: true,
      dragNodes: true, // allow dragging nodes
      zoomView: false, // do not allow zooming
      dragView: false // do not allow dragging
    }
  };




  var network = new vis.Network(container, data, options);

}

$('#model4temp').on('shown.bs.modal', function() {
  drawNetwork();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.css" rel="stylesheet" type="text/css" />

        <script src="https://code.jquery.com/jquery.min.js"></script>

        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th>Name</th>
            <th>Connect to</th>
            <th>View</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Data1</td>
            <td>Data2, Data3, Data4</td>
            <td><input type="button" data-toggle="modal" data-target='#model4temp' value="View" class="btn btn-success btn-md"></td>
          </tr>
          <tr>
            
            <td>Data2</td>
            <td>Data3, Data4</td>
            <td></td>
          </tr>
          <tr>
            
            <td>Data3</td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            
            <td>Data4</td>
            <td>Data5</td>
            <td></td>
          </tr>
          <tr>
            
            <td>Data5</td>
            <td>Data6</td>
            <td></td>
          </tr>
          <tr>
            
            <td>Data6</td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="modal fade" id="model4temp" tabindex="-1" role="dialog" aria-labelledby="basicModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Sample Network in modal</h4>
      </div>
      <div class="modal-body">
        <div id="network-container" style="height:500px;width:600px;"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

如果你在这个变量“网络”中获取你的 mysql 数据，那么就这样做。

$('#model4temp').on('shown.bs.modal', function() {
  drawNetwork(network);
});

然后像这样定义你的函数

function drawNetwork(network) {
  // Your stuff here
}