我想通过单击一个按钮来更新此 d3.js 条形图上的数据。 （点击）

Question

我将如何告诉 D3 通过单击我创建的按钮来推送包含新随机数据的新图表？现在我通过刷新页面来获取新数据，但我希望能够在不重新加载页面的情况下推送新图表。

</script>
    var w = 500;
    var h = 500;
    var barPadding = 1;

    var dataset = [ ];

    for (var i = 0; i < 14; i++) {var newNumber = Math.round(Math.random() * 70);
    dataset.push(newNumber);}



    var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

    var widthScale = d3.scale.linear()
                    .domain([0, d3.max(dataset, function(d,i) {return d;})])
                    .range([0,w]);

        svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("x", 3)
            .attr("y", function (d,i) {return i* 36;}) 
            .attr("width", widthScale)
            .transition()
            .duration(1000)
            .attr("height", h / dataset.length - barPadding)
            .attr("fill", function(d) {return "rgb(0, 0, " + (d * 10) + ")";});

        svg.selectAll("text")
            .data(dataset)
            .enter()
            .append("text")
            .text(function(d) {return d;})
            .attr("x", function(d) {return widthScale(d) -17;})
            .attr("y", function(d,i) {return (i * 36) + 23 ;})
            .attr("fill", "white")
            .attr("font-family", "sans-serif")
            .attr("text-anchor", "middle");

Answer 1

您需要指定选择的.update() 和.exit()。理想情况下，您应该更改代码，使其只调用一次.data(dataset)。

var g = svg.selectAll("g")
    .data(dataset);

然后您可以定义在 .enter() .update() 和 .exit() 上执行的操作。您的 .enter()s 将分别以 g.enter().append('rect') 和 g.enter().append('text') 开头。虽然您需要处理.update()，但退出可以像移除对象一样简单。

g.exit()
    .remove();

对于大多数数据，每个数据的标识是索引值。如果不是这种情况，那么您需要确保提供访问器

    .data(data, function(d) { return d.name; })

我会推荐this tutorial on bar charts，它可以让您快速上手。如果它太先进，那么尝试part 1 开始。您甚至可以取消用户单击按钮进行更新的要求。