Блог

Я хочу иметь возможность переключаться между двумя наборами данных с помощью D3.js. Когда я переключаюсь, я хочу, чтобы старый набор данных исчезал, в то же время новый набор данных исчезает.

Я уже некоторое время работаю над этим кодом, но я не получаю желаемого поведения. Найдите следующую скрипку и попробуйте щелкнуть по текстовым наборам данных1 и наборам2.

Например, когда я сначала нажимаю Dataset1, все работает нормально, но когда я позже нажимаю Dataset2, я не получаю все значения Dataset2. Если я сейчас снова нажму Dataset1, ничего не произойдет, и мне придется дублировать щелчок, чтобы все заработало. Также мне никогда не удается отобразить все девять элементов Dataset2.

Чего мне не хватает?

 var dataset1 = [1,2,3,4],
    dataset2 = [1,2,3,4,5,6,7,8,9],
    svg = d3.select("body").append("svg");

update = function(newDataset){
    var allArrows = svg.selectAll(".arrow"),
        addNew; 

    addNew = function (){
            allArrows
            .data(newDataset)
            .enter()
            .append("line")
            .attr({
                opacity : 0,
                "stroke-width" : 1,
                stroke : "blue",
                class : "arrow",
                x1 : 10,
                y1 : function (d, i) { return 10 * i   10 },
                x2 : 50,
                y2 : function (d, i) { return 10 * i   10}
            })
            .transition()
            .duration(500)
            .attr({
                opacity : 1
            });
    });

    if ( !allArrows.empty() ) {
        allArrows
        .data([])
        .exit()
        .transition()
        .duration(500)
        .attr("opacity", 0);
        .remove();
        addNew();
    }
    else {
        addNew();
    }
    return chart;
};
  

http://jsfiddle.net/favetelinguis/pWqLL/1/