d3.js - 使用 D3.js 在单击切换图例时重绘堆栈条形图

Question

我想使用 D3.js 实现带有切换图例的堆栈栏，单击图例时，堆栈栏应该重新绘制。如果图例处于事件状态，则对应于图例的矩形板应该消失，反之亦然。

单击图例时，我无法正确更新与组元素绑定(bind)的数据以及组元素中存在的矩形元素。

在 DOM 树中，单击图例时，矩形元素被追加并添加到第一组元素，矩形元素实际上应该只更新。

可以在Jsfiddle here查看源码

我想要类似于已实现的带有图例选择的堆栈栏的东西 here在 nvd3

        function redraw() {
            var legendselector = d3.selectAll("g.rect");
            var legendData = legendselector.data();
            var columnObj = legendData.filter(function(d, i) {
                if (d.active == true)
                    return d;
            });

            var remapped = columnObj.map(function(cause) {
                return dataArch.map(function(d, i) {
                    return {
                        x : d.timeStamp,
                        y : d[cause.errorType]
                    };
                });
            });

            var stacked = d3.layout.stack()(remapped);
            valgroup = stackBarGroup.selectAll("g.valgroup").data(stacked, function(d)            {
                return d;
            }).attr("class", "valgroup");

            valgroup.enter().append("svg:g").attr("class", "valgroup").style("fill",                                                             
    function(d, i) {

                return columnObj[i].color;
            }).style("stroke", function(d, i) {
                return d3.rgb(columnObj[i].color).darker();
            });

            valgroup.exit().remove();
            rect = valgroup.selectAll("rectangle");
            // Add a rect for each date.
            rect = valgroup.selectAll("rectangle").data(function(d, i) {
                return d;
            }).enter().append('rect');


            valgroup.exit().remove();

            rect.attr("x", function(d) {
                return x(d.x);
            }).attr("y", function(d) {
                return y(d.y0 + d.y);
            }).attr("height", function(d) {
                return y(d.y0) - y(d.y0 + d.y);
            }).attr("width", 6);

        }

Answer 1

 function redraw() did not use transition inside it 

你需要对object constancy有更多的了解. (作者描述的三种状态) 我在d3中写了一个组图的例子，图例是可交互的并且效果很好，因为我是d3的新手，可能使用的模式或标准不是很正式。

仅供引用，希望对您有所帮助，祝您好运:-p

fiddle