Protovis 使用 Javascript 更新数据答案

【问题标题】：Protovis update data with JavascriptProtovis 使用 Javascript 更新数据
【发布时间】：2023-03-13 00:35:01
【问题描述】：

我有这个脚本 protovis：

<script type="text/javascript+protovis">
    var w = 600;
    var h = 600;
    var img = new pv.Panel()
        .width(w)
        .height(h);

    img.add(pv.Image)
        .url("./icon/image.gif")
        .title("image");

    img.add(pv.Dot)
        .data(data)
        .left(function(d) d[0] * w)
        .bottom(function(d) d[1] * h)
        .size(function(d) d[2] * 100)
        .fillStyle("rgba(30, 120, 180, .6)")
        .strokeStyle("white");

    img.render();
</script>

data1 在 Javascript 文件中声明：

var data = [[.1, .1, 1], [.2, .2, 2], [.3, .3, 3]];

当我测试我的图像有 3 个点时。但是，例如，如果我更改 Javascript 函数中的数据，然后用新数据重绘 protovis，我不知道该怎么做。就我而言，当用户单击菜单时，我会从数据库中接收新数据并更新数据。但是在我更改数据后，我需要重新绘制图像。

我想知道如何重新加载网页以便使用新数据重新绘制图像。我正在考虑重新加载网页，在 POST 中传递数据并在绘制图像之前用 Javascript 检索数据。

但我不确定这个解决方案是否有效，以及它是否是最好的方法。

【问题讨论】：

标签： javascript protovis

【解决方案1】：

您的问题有点不清楚，但有几种方法可以做到这一点：

如果您想在不重新加载页面的情况下更新可视化，您可以使用 AJAX 加载新数据（可能使用 jQuery 或其他帮助库）。在加载新数据后将运行的回调函数中，将data 变量分配给新数据，然后调用img.render()。例如，使用 jQuery：

// assign a handler to run when the user clicks Submit
$('#userForm').submit(function() {
    // get new data based on form input
    $.get('/data.php?' + $(this).serialize(),
        // set the callback function to run with returned data
        function(newData) {
            // set data to new data
            data = newData;
            // refresh
            img.render();
        }
    );
});

如果要重新加载页面，基本上有两种选择。第一种是将您的数据内嵌在 HTML 页面中，而不是单独加载，然后使用 PHP 或您选择的服务器端语言将数据替换为用户参数定义的新数据。第二个选项是使您的data.js 文件动态化，并在重新加载页面时传入新参数，例如data.js?option=2。

但实际上，除非您还打算更改页面上的其他内容，否则最好使用 AJAX 选项。它在服务器端不再复杂，在客户端只是稍微复杂一点，它为您的用户节省了页面加载时间。

【讨论】：

【解决方案2】：

感谢您的回答。当用户单击菜单而不重新加载页面时，我设法绘制了图像并使用新数据在图像上添加了新点。我不知道可以在 Javascript 文件中调用 Protovis 函数，例如 img.render()。

所以现在我有了这个 protovis 脚本：

<script type="text/javascript+protovis">
    var w = 1286;
    var h = 909;
    img = new pv.Panel()
        .width(w)
        .height(h);

    img.add(pv.Image)
        .url("./plans/img.pnj")
        .title("image");

    function addAndDrawDots(){
        img.add(pv.Dot)
        .data(data1)
        .left(function(d) d[0] * w / 100)
        .top(function(d) d[1] * h / 100)
        .size(function(d) d[2] * 100)
        .fillStyle("rgba(30, 120, 180, .6)")
        .strokeStyle("white");
        img.render();
        }
</script>

然后我只需设置 data1 变量并在用户单击菜单时调用的函数中调用 addAndDrawDots。

现在，如果我可以从面板中删除点，这将对我的应用程序有用，因为使用此解决方案，如果我更改数据，它会添加新的点而不删除以前的点。

【讨论】：