Protovis обновляет данные с помощью Javascript - PullRequest
Новая
       14

Protovis обновляет данные с помощью Javascript

1 голос
/ 27 января 2012

У меня есть этот сценарий: 

<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>

данные1 объявлены в файле Javascript: 

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

Когда я проверяю, у меня есть изображение с 3 точками. Но я не знаю, как это сделать, если, например, я изменил данные в функции Javascript, а затем перерисовал прототип с новыми данными. В моем случае, когда пользователь нажимает в меню, я получаю новые данные из базы данных и обновляю данные. Но после того, как я изменил данные, мне нужно перерисовать изображение.

Мне было интересно, как я могу перезагрузить веб-страницу, чтобы перерисовать изображение с новыми данными. Я думал о перезагрузке веб-страницы с передачей данных в POST и извлечении данных в Javascript перед рисованием изображения.

Но я не уверен, будет ли это решение работать и будет ли это лучшим способом сделать это.

Ответы [ 2 ]

1 голос
/ 29 января 2012

Ваш вопрос немного неясен, но есть несколько способов сделать это:

  • Если вы хотите обновить визуализацию без перезагрузки страницы , выможет использовать 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.Он не сложнее на стороне сервера, только чуть сложнее на стороне клиента и экономит нагрузку на пользователя.

0 голосов
/ 30 января 2012

Спасибо за ваш ответ. Мне удалось нарисовать изображение и добавить новые точки на изображение с новыми данными, когда пользователь щелкает меню без перезагрузки страницы. Я не знал, что можно вызвать функцию Protovis в файле Javascript, например, 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 в функции, вызываемой, когда пользователь нажимает на меню.

Теперь для моего приложения будет полезно, если я смогу удалить точки из панели, потому что с этим решением, если я изменю данные, он добавляет новые точки, не удаляя предыдущие.

...