d3 сложенная полоса с полосами не обновляется при переходе

В последовательности этой проблемы (d3 show метки только для тиков с данными на гистограмме) Я применил переход для изменения данных гистограммы с накоплением с помощью D3.

Мои оси имеют идеальный переход и модификацию для этого нового набора данных, но горизонтальные полосы все еще нетронуты. Я пробовал это решение от Ларса (гистограммы d3.js переход между несколькими CSV-файлами), но я все еще вижу, что полосы изменились.

Мой код:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" class="ocks-org do-not-copy">
<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div><button class="btn btn-mini" id="backButton" onclick="updateData();">Update</button></div>
<div id="timeLine"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var timeline;

var margin = {
    top : 20,
    right : 10,
    bottom : 60,
    left : 80
},
width = 500 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .rangeRound([0, width]);

var y = d3.scale.ordinal()
    .rangeBands([height, 0], 0.1);

var color = d3.scale.ordinal()
    .range(["#1f77b4", "#2ca02c", "#E53524"]);
//var color = d3.scale.category10()

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(d3.format(".2s"))
    .ticks(10);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(5);

timeline = d3.select("#timeLine").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

    var dataSet;

dataSet = [{
        "Date" : "2014-01",
        "insert" : "2",
        "remove" : "17",
        "updates" : "27"
    }, {
        "Date" : "2014-02",
        "insert" : "27",
        "remove" : "127",
        "updates" : "47"
    }, {
        "Date" : "2014-03",
        "insert" : "227",
        "remove" : "17",
        "updates" : "42"
    }, {
        "Date" : "2014-04",
        "insert" : "0",
        "remove" : "0",
        "updates" : "0"
    }, {
        "Date" : "2014-05",
        "insert" : "127",
        "remove" : "1",
        "updates" : "423"
    },
];
color.domain(d3.keys(dataSet[0]).filter(function (key) {
        return key !== "Date";
    }));

dataSet.forEach(function (d) {
    var x0 = 0;
    d.ages = color.domain().map(function (name) {
            return {
                name : name,
                x0 : x0,
                x1 : x0 += +d[name]
            };
        });
    d.total = d.ages[d.ages.length - 1].x1;
});

yAxis.tickFormat(function (d) {
    var val = 0;
    dataSet.forEach(function (item) {
        if (item.Date == d)
            val = item.total;
    });
    return val == 0 ? "" : d;
});

y.domain(dataSet.map(function (d) {
        return d.Date;
    }));

x.domain([0, d3.max(dataSet, function (d) {
            return (d.total + 5);
        })]);

timeline.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", 1)
.attr("dx", "42em")
.attr("dy", "3em")
.style("text-anchor", "end")
.text("Operations");

timeline.append("g")
.attr("class", "y axis")
.call(yAxis);

var layer = timeline.selectAll(".state")
    .data(dataSet)
    .enter().append("g")
    .attr("class", "rect")
    .attr("transform", function (d) {
        return "translate(0," + y(d.Date) + ")";
    });

var rect = layer.selectAll("rect")
    .data(function (d) {
        return d.ages;
    })
    .enter().append("rect")
    .attr("class", "rect")
    .attr("width", 0)
    .attr("x", width)
    .attr('y', function (d, i) {
        return y(d.Date);
    })
    .attr("height", y.rangeBand())
    .style("fill", function (d) {
        return color(d.name);
    });

rect.transition()
.duration(600)
.delay(function (d, i) {
    return i * 300;
})
.attr("width", function (d) {
    return x(d.x1) - x(d.x0);
})
.attr("x", function (d) {
    return x(d.x0);
});

function updateData() {

    dataSet = [{
        "Date" : "2014-11",
        "insert" : "27",
        "remove" : "1723",
        "updates" : "7"
    }, {
        "Date" : "2014-12",
        "insert" : "237",
        "remove" : "12",
        "updates" : "433"
    }, {
        "Date" : "2015-03",
        "insert" : "22",
        "remove" : "172",
        "updates" : "423"
    }, {
        "Date" : "2015-05",
        "insert" : "17",
        "remove" : "122",
        "updates" : "42"
    }, {
        "Date" : "2015-04",
        "insert" : "0",
        "remove" : "0",
        "updates" : "0"
    }
];

dataSet.forEach(function (d) {
    var x0 = 0;
    d.ages = color.domain().map(function (name) {
            return {
                name : name,
                x0 : x0,
                x1 : x0 += +d[name]
            };
        });
    d.total = d.ages[d.ages.length - 1].x1;
});

yAxis.tickFormat(function (d) {
    var val = 0;
    dataSet.forEach(function (item) {
        if (item.Date == d)
            val = item.total;
    });
    return val == 0 ? "" : d;
});

y.domain(dataSet.map(function (d) {
        return d.Date;
    }));

x.domain([0, d3.max(dataSet, function (d) {
            return (d.total + 5);
        })]);

// Make the changes
var transition = timeline.transition().duration(750),
delay = function (d, i) {
    return i * 50;
};

// update bars
//var teste = timeline.selectAll(".state").data(dataSet);
var layer = timeline.selectAll(".state").data(dataSet).enter().append("g")
    .attr("class", "rect")
    .attr("transform", function (d) {
        return "translate(0," + y(d.Date) + ")";
    });

var sel = layer.selectAll("rect")
    .data(function (d) {
        return d.ages;
    })
    .enter().append("rect")
    .attr("class", "rect")
    .attr("width", 0)
    .attr("x", width)
    .attr('y', function (d, i) {
        return y(d.Date);
    })
    //.attr("height", y.rangeBand())
    .attr("height", y.rangeBand())
    .style("fill", function (d) {
        return color(d.name);
    });

//remove bars no longer present - DON'T WORK
//sel.exit().remove();

sel.transition()
.duration(600)
.delay(function (d, i) {
    return i * 300;
})
.attr("x", function (d) {
    return x(d.x0);
}).attr("width", function (d) {
    return x(d.x1) - x(d.x0);
})
.attr('y', function (d, i) {
    return y(d.Date);
})
.attr("height", y.rangeBand());

transition.select(".y.axis") // change the y axis
.call(yAxis);

transition.select(".x.axis") // change the x axis
.call(xAxis);

}
</script>
</body>
</html>

Спасибо, Филипе


d3.js stacked-chart transitions
person milheiros    schedule 04.02.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Опустим организацию кода. Основная ошибка заключается в том, что вы пытаетесь получить доступ к переменной, которая не определена. Сначала, когда вы строите сложенные столбцы, вы делаете это:

var rect = layer.selectAll("rect")
.data(function (d) {
    return d.ages;
})

которые связывают с каждым прямоугольником значения в «d.ages», и поэтому вы можете получить доступ к «d.x0» и «d.x1». В функции обновления вы пытаетесь получить прямой доступ к «d.x0» и «d.x1», которых не существует, поскольку они находятся в элементе ages.

Ваш элемент набора данных в основной функции:

Object {name: "insert", x0: 0, x1: 2}

Ваш элемент набора данных в функции обновления:

Object {Date: "2015-03", insert: "22", remove: "172", updates: "423", ages: Array[3]…}

а потом в веках:

ages: Array[3]
      0: Object
         name: "insert"
         x0: 0
         x1: 22
......................
person Francesco    schedule 04.02.2015
comment
Привет Франческо, Спасибо за вашу помощь. Я обновил свой код, и я вижу новые полосы. Но старые до сих пор в чарте. sel.exit().remove(); в моей функции обновления не выполняет работу, которую должен делать. - person milheiros; 04.02.2015
comment
Если вы обновите код, я мог бы взглянуть на него :) - person Francesco; 04.02.2015
comment
Хорошо, решено, это не правильное решение, но то, как оно разработано, ваша диаграмма лучше всего, вы можете найти это здесь -> jsfiddle.net/g822u058 Я добавил класс («первый»), когда вы рисуете столбцы в первый раз, и класс (обновление), когда вы их обновляете, а затем каждый раз, когда вы вызываете функцию обновления , первые две инструкции просто удаляют старые бары. - person Francesco; 04.02.2015
comment
Привет Франческо, Это работает! Но я внес некоторые изменения: нам не нужны эти два новых класса. Просто поместите это в начало функции обновления: d3.selectAll('.rect').remove();. Просто удалите все стержни, прежде чем мы построим другие. Спасибо!! - person milheiros; 04.02.2015
comment
Ну, даже лучше. С удовольствием @milheiros ;) - person Francesco; 04.02.2015