Javascript protovis更新数据

我已经尝试了很多使用jquery更新protovis的方法，但是什么都没有发生。这是我的密码

<script type="text/javascript+protovis">
var minnesota =  [{name:"job 1", values:[182904,196530,203944,192492,77393,81243]}]

$(document).ready(function(){
draw();
$("button").click(function(){
minnesota = [{name:"changed job", values:[342,34234,2342,543]}]
draw();
});

});



    function draw(){
    var w = 200,
        h = 30,
        numberFormat = pv.Format.number(),
        dateFormat = pv.Format.date("%B %Y");

    /* Color by maximum number of people employed in that job. */
    var c = pv.Scale.log(minnesota, function(d) pv.max(d.values))
        .range("#ccc", "#1f77b4");

    /* Tile the visualization for each job. */
    var vis = new pv.Panel()
        .data(minnesota)
        .width(w)
        .height(h + 10)
        .top(6)
        .left(6)
        .right(6)
        .bottom(6);

    /* A panel instance to store scales (x, y) and the mouseover index (i). */
    var panel = vis.add(pv.Panel)
        .def("i", -1)
        .def("x", function(d) pv.Scale.linear(d.values, pv.index).range(0, w))
        .def("y", function(d) pv.Scale.linear(0, pv.max(d.values)).range(0, h))
        .bottom(10)
        .events("all")
        .event("mousemove", pv.Behavior.point(Infinity).collapse("y"));

    /* The area. */
    panel.add(pv.Area)
        .data(function(d) d.values)
        .fillStyle(function(d, p) panel.i() < 0 ? c(pv.max(p.values)) : "#2ca02c")
        .left(function() panel.x()(this.index))
        .height(function(d) panel.y()(d))
        .bottom(0)
        .event("point", function() panel.i(this.index))
        .event("unpoint", function() panel.i(-1));

    /* The x-axis. */
    panel.add(pv.Rule)
        .bottom(0);

    /* The mouseover dot. */
    panel.add(pv.Dot)
        .visible(function() panel.i() >= 0)
        .left(function() panel.x()(panel.i()))
        .bottom(function(d) panel.y()(d.values[panel.i()]))
        .fillStyle("#ff7f0e")
        .strokeStyle(null)
        .size(10);

    /* The label: either the job name, or the month and value. */
    panel.add(pv.Label)
        .bottom(-1)
        .textBaseline("top")
        .left(function() panel.i() < 0 ? 0 : null)
        .right(function() panel.i() < 0 ? null : 0)
        .textAlign(function() panel.i() < 0 ? "left" : "right")
        .textStyle(function() panel.i() < 0 ? "#999" : "#000")
        .text(function(d) panel.i() < 0 ? d.name
            : dateFormat(new Date(2000, panel.i() * 3, 1))
            + ": " + numberFormat(d.values[panel.i()]));

    vis.render();
    }
        </script>

var明尼苏达=[{name:“作业1”，值：[1829041965302039441924927739381243]}]
$（文档）.ready（函数（）{
draw（）；
$（“按钮”）。单击（函数（）{
明尼苏达州=[{name:“已更改的作业”，值：[342343]}]
draw（）；
});
});
函数绘图（）{
var w=200，
h=30，
numberFormat=pv.Format.number（），
dateFormat=pv.Format.date（“%B%Y”）；
/*根据从事该工作的最大人数确定颜色*/
var c=pv.Scale.log（明尼苏达州，函数（d）pv.max（d值））
.范围（“ccc”和“1f77b4”）；
/*为每个作业平铺可视化*/
var vis=新光伏板（）
.数据（明尼苏达州）
.宽度（w）
.高度（h+10）
.顶部（6）
.左（6）
.对（6）
.底部（6）；
/*用于存储比例（x，y）和鼠标悬停索引（i）的面板实例*/
var配电盘=可视添加（pv.配电盘）
.def（“i”，-1）
.def（“x”，函数（d）pv.刻度线性（d.值，pv.指数）。范围（0，w））
.def（“y”，函数（d）pv.刻度线性（0，pv.最大（d.值））.范围（0，h））
.底部（10）
.事件（“全部”）
.event（“mousemove”、pv.Behavior.point（无穷大）、collapse（“y”）；
/*这个地区*/
面板添加（pv.面积）
.数据（功能（d）d.值）
.fillStyle（函数（d，p）面板.i（）<0？c（pv.max（p.values））：“#2ca02c”）
.left（function（）panel.x（）（this.index））
.高度（功能（d）面板.y（）（d））
.底部（0）
.event（“point”，function（）panel.i（this.index））
.event（“unpoint”，function（）panel.i（-1））；
/*x轴*/
面板添加（pv.规则）
.底部（0）；
/*鼠标悬停点*/
面板添加（pv.Dot）
.visible（函数（）面板.i（）>=0）
.left（函数（）panel.x（）（panel.i（））
.bottom（函数（d）panel.y（）（d.values[panel.i（）））
.fillStyle（“#ff7f0e”）
.strokeStyle（空）
.尺寸（10）；
/*标签：作业名称或月份和值*/
面板添加（pv.标签）
.bottom（-1）
.textBaseline（“顶部”）
.left（函数（）面板.i（）<0？0:null）
.right（函数（）面板.i（）<0？null:0）
.textAlign（函数（）面板.i（）<0？“左”：“右”）
.textStyle（函数（）面板.i（）<0？#999）：“000”）
.text（函数（d）面板.i（）<0？d.name
：dateFormat（新日期（2000年，panel.i（）*3,1））
+“：”+numberFormat（d.values[panel.i（）]）；
vis.render（）；
}

当文档准备就绪时，它会创建图表，但当我单击按钮时，它不会重新绘制图表。我已经用firebug检查了新的数据值，这很好，但它不会更新图表值。

---

我已经试了很多次想找到解决办法，但都没有成功。有什么窍门吗？

对我来说，你的解决方案绘制了一个额外的图表，而不是用新数据重新绘制相同的图表

我在您的代码中移动了一些内容，并使更新工作正常。您只需要更新数据并调用vis.redraw，而不是在每次单击时设置整个可视化

请查看：

---

我只使用了

vis.render（）在更改数据的每个函数末尾