如何将MySQL数据传入Javascript的drawNetwork()函数实现可视化

我来帮你一步步解决这个问题，把MySQL里的关联数据传到vis.js的可视化函数里其实分几个关键步骤，咱们结合你给的示例代码来调整：

首先你需要一个后端接口（这里用PHP举例，它和MySQL搭配是最常见的组合），用来从数据库查询节点和关联关系，再输出成前端能识别的JSON格式。比如创建一个get_network_data.php文件：

<?php
// 替换成你的数据库连接信息
$servername = "localhost";
$username = "你的数据库用户名";
$password = "你的数据库密码";
$dbname = "你的数据库名";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}

// 查询所有节点数据（假设你的节点表叫nodes，有id和name字段）
$nodes_sql = "SELECT id, name FROM nodes";
$nodes_result = $conn->query($nodes_sql);
$nodes = [];
while($row = $nodes_result->fetch_assoc()) {
    $nodes[] = [
        "id" => $row['id'],
        "label" => $row['name'],
        "shape" => "box"
    ];
}

// 查询所有关联关系（假设你的关系表叫edges，有from_id, to_id, description字段）
$edges_sql = "SELECT from_id, to_id, description FROM edges";
$edges_result = $conn->query($edges_sql);
$edges = [];
while($row = $edges_result->fetch_assoc()) {
    $edges[] = [
        "from" => $row['from_id'],
        "to" => $row['to_id'],
        "label" => $row['description'],
        "arrows" => ["to" => true]
    ];
}

// 输出JSON格式的数据
header('Content-Type: application/json');
echo json_encode([
    "nodes" => $nodes,
    "edges" => $edges
]);

$conn->close();
?>

原来的drawNetwork函数里的节点和关系是硬编码的，现在我们把它改成可以接收动态数据的形式，然后在模态框弹出时，先请求后端数据再调用绘图函数：

// 改写drawNetwork，让它接收nodes和edges参数
function drawNetwork(nodes, edges) {
    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,
            zoomView: false,
            dragView: false
        }
    };
    var network = new vis.Network(container, data, options);
}

// 修改模态框的显示事件，先请求数据再绘图
$('#model4temp').on('shown.bs.modal', function() {
    // 用jQuery的AJAX请求后端接口
    $.ajax({
        url: 'get_network_data.php', // 刚才写的后端文件路径
        method: 'GET',
        dataType: 'json',
        success: function(response) {
            // 请求成功后，把后端返回的数据传入drawNetwork
            drawNetwork(response.nodes, response.edges);
        },
        error: function(xhr, status, error) {
            console.error('获取数据失败:', error);
            alert('加载网络数据失败，请检查后端接口');
        }
    });
});

如果你的按钮需要点击后只显示当前数据的关联（比如点击Data1的按钮只展示Data1相关的节点和关系），可以给按钮加一个data-id属性：

<input type="button" data-toggle="modal" data-target='#model4temp' data-id="1" value="View" class="btn btn-success btn-md">

然后修改前端AJAX请求，把这个ID传给后端：

$('#model4temp').on('shown.bs.modal', function(e) {
    // 获取点击按钮对应的data-id
    var targetId = $(e.relatedTarget).data('id');
    $.ajax({
        url: 'get_network_data.php',
        method: 'GET',
        data: { target_id: targetId }, // 把ID传给后端
        dataType: 'json',
        success: function(response) {
            drawNetwork(response.nodes, response.edges);
        }
    });
});

最后在后端的SQL查询里加上WHERE条件，只查询和当前ID相关的节点与关系即可。

内容的提问来源于stack exchange，提问作者user9729141