使用不同的值和不同的数据大小更新D3柱形图

Question

背景

我试图用D3.js创建一个可重用的图表对象。 我已经设置了一个chart()函数，它将生成一个柱形图。 在任何列上的click事件上，图表将使用包含随机数量的数据点的新随机数据数组进行更新（即原始图表可能包含8列，但在更新时，可能有20列或4列）。

问题

假设我的原始数据集中有8个数据点（因而是8列）。 当我使用随机数据更新图表时，列会适当地将其高度调整为新值 - 但不会添加新栏。 此外，虽然列的宽度适当调整以适应容器的宽度和新数据点的数量，但如果该数据点的数量小于原始数据集，则原始数据集中的某些列将一直保持到数据点的数量大于或等于原始数据。

我的最终目标是动态添加新数据，或者动态删除新数据范围之外的旧数据。

我已经创建了一个jsfiddle的行为。 您可能需要多次单击列才能看到我正在描述的行为。 另外，我在下面粘贴了我的代码。

提前致谢！

function chart(config) {

    // set default options
    var defaultOptions = {
        selector: '#chartZone',
        class: 'chart',
        id: null,
        data: [1,2,6,4, 2, 6, 7, 2],
        type: 'column', 
        width: 200,
        height: 200,
        callback: null,
        interpolate: 'monotone'
    };

    // fill in unspecified settings in the config with the defaults
    var settings = $.extend(defaultOptions, config);

    function my() { // generate chart with this function        

        var w = settings.width,
            h = settings.height,
            barPadding = 3,
            scale = 10,
            max = d3.max(settings.data);        

        var svg = d3.select(settings.selector) // create the main svg container
            .append("svg")
            .attr("width",w)
            .attr("height",h);

        var y = d3.scale.linear().range([h, 0]),
            yAxis = d3.svg.axis().scale(y).ticks(5).orient("left"),
            x = d3.scale.linear().range([w, 0]);

        y.domain([0, max]).nice();
        x.domain([0, settings.data.length - 1]).nice();        

        var rect = svg.selectAll("rect")
          .data(settings.data)
          .enter()
          .append("rect")
          .attr("x", function(d,i) {
            return i * (w / settings.data.length);
          })
          .attr("y", function(d) {
            return h - h * (d / max);
          })
          .attr("width", w / settings.data.length - barPadding)
          .attr("height", function(d) {
            return h * (d / max);
          })
          .attr("fill", "rgb(90,90,90)");

        svg.append("svg:g")
           .attr("class", "y axis")
           .attr("transform", "translate(-4,0)")
           .call(yAxis);        

        svg.on("click", function() {
            var newData = [], maxCap = Math.round(Math.random() * 100);

            for (var i = 0; i < Math.round(Math.random()*100); i++) {
                var newNumber = Math.random() * maxCap;
                newData.push(Math.round(newNumber));                
            }    

            newMax = d3.max(newData);

            y.domain([0, newMax]).nice();

            var t = svg.transition().duration(750);

            t.select(".y.axis").call(yAxis);

            rect.data(newData)
                 .transition().duration(750)
                 .attr("height", function(d) {
                    return h * (d / newMax);
                 })
                 .attr("x", function(d,i) {
                    return i * (w / newData.length);
                 })
                 .attr("width", w / newData.length - barPadding)
                 .attr("y", function(d) {
                    return h - h * (d / newMax);
                 });
            });
        }

    my();

    return my;

}

var myChart = chart();

Answer 1

实际上这里发生了一些事情 - 正如您所指出的那样，新数据范围之外的数据没有被删除，而且还没有添加现有数据范围之外的新数据。 这一切都与你在代码中修改的选择有关 - 你的更新函数应该使用enter()和exit()选项来处理这些 - 参见Thinking with Joins 。

这是一个更新的小提琴： http ： //jsfiddle.net/LPtTm/11/