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

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

单击图例时，我无法正确更新与组元素和组元素内存在的矩形元素绑定的数据。

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

您可以在中查看源代码杰斯小提琴在这里 http://jsfiddle.net/vikashkrpandey/AKt8L/16/

我想要类似于堆栈栏并实现图例选择的东西here http://nvd3.org/examples/multiBar.html in 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);

        }

 function redraw() did not use transition inside it 

你需要更多地了解物体恒常性 http://bost.ocks.org/mike/constancy/。 （作者描述的三种状态） 我在d3中写了一个分组图的例子，图例是可交互的并且效果很好，因为我是d3的新手，也许使用的模式或标准不是很正式。

下面列出仅供您参考，希望对您有所帮助，祝您好运:-p

fiddle http://jsfiddle.net/ramseyfeng/8790t2vk/