Question

我正在尝试使用d3.js在“bounds_changed”谷歌地图事件中生成和更新条形图。

在我的XSL文件中，我想在balise中显示图表：

<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

哦好的，谢谢，我现在明白了输入选择如何与键配合使用。这帮了我很多知识stockstock.blogspot.fr/2012/01 / ... 所以，我现在正在寻找如何用0键替换现有元素，退出并删除。再次感谢。

修正:)我刚补充说：

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

编辑：

上面的行，如果数据是javascript数组，则工作。但是我想在json doc中用数据绘制相同的东西。

例如：

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)}
]

我读到我应该使用key函数（function（d）{return d.x;}）用exit（）。remove（）删除它。我试过了：

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

但没有任何事情发生，我无法理解为什么。或者也许是因为我的“数据”从不相同，然后找不到相应的键是不可能的？如果有人看到我的问题所在，谢谢。

在“bounds_changed”谷歌地图事件上更新d3条形图

1 个答案: