更新"bounds_changed“谷歌地图事件上的bounds_changed条形图

Question

我试图用d3.js生成和更新"bounds_changed“谷歌地图事件上的条形图。

在我的XSL文件中，我想在下面的栏杆中显示图表：

<svg class="chart"></svg>

该图形只生成一次，但在我移动地图时从不更新。

下面是我的脚本的摘录:条形图代码来自d3教程的一个示例。

google.maps.event.addListener(carte, 'bounds_changed', function() {

    var df = [Math.floor((Math.random()*50)+10),Math.floor((Math.random()*50)+10),Math.floor((Math.random()*50)+10),Math.floor((Math.random()*50)+10),Math.floor((Math.random()*50)+10)];

    var width = 420,
        barHeight = 20;

    var x = d3.scale.linear()
        .domain([0, d3.max(df)])
        .range([0, width]);

    var chart = d3.select(".chart")
        .attr("width", width)
        .attr("height", barHeight * df.length);

    var bar = chart.selectAll("g")
        .data(df)
        .enter().append("g")
        .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

    bar.append("rect")
        .attr("width", x)
        .attr("height", barHeight - 1);

    bar.append("text")
        .attr("x", function(d) { return x(d) - 3; })
        .attr("y", barHeight / 2)
        .attr("dy", ".35em")
        .text(function(d) { return d; });
});

为什么我的“图表”现在“阻塞”，不能更新？难道不是第二次这样“选择”吗？谢谢你的帮助。

Answer 1

哦，好的，谢谢你，我现在明白了enter选择是如何与键一起工作的。这帮助了我更多的知识，比如blogpot.fr/2012/01/…因此，我现在正在寻找如何用0键替换现有元素，并使用exit和remove。再次感谢。

修正:)我刚才加了：

d3.selectAll('g').data([]).order().exit().remove();

编辑：

如果数据是javascript数组，则上面的行可以工作。但是我想用json中的数据来画同样的东西。

例如：

data = [
  { "id": 1, "x": Math.floor((Math.random()*50)+10)},
  { "id": 2, "x": Math.floor((Math.random()*50)+10)},
  { "id": 3, "x": Math.floor((Math.random()*50)+10)}
]

我读到应该使用键函数(函数(D){返回d.x；})来用exit().remove()删除它。我试过：

d3.selectAll('g').data(data, function(d) { return d.x; }).order().exit().remove();

但什么都没发生我不明白为什么。或者是因为我的“数据”从来都不是相同的，那么就不可能找到相应的键了？如果有人知道我的问题出在哪里，谢谢你。