通过使用D3.js单击切换图例来重画堆栈栏聊天 [英] Redrawing the stack bar chat on click on the toggle legend using D3.js

问题描述

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

I want to implement stack bar with toggle legend using D3.js ,on click on the legend, stack bar should get redrawn.If the legend was active,rectangle slab corresponding to the legend should get disappear and vise versa.

单击图例时，我无法正确更新与group元素内存在的group元素和rect元素绑定的数据.

On click on the legend, I am not able to update the data binded with the group element and rect element present inside the group element properly.

在DOM树中，在图例上单击，rect元素将被追加并添加到第一个group元素，rect元素实际上应该仅被更新.

In the DOM tree,on click on the legend,rect element is getting appended and added to first group element, rect element should actually get updated only.

您可以在 Jsfiddle此处查看源代码

我想要类似于在nvd3中在此处中实现的带有图例选择的堆栈栏

I want something similar to stack bar with legend selection as implemented here 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 

您需要进一步了解对象恒定性. (作者描述的三种状态) 我在d3中编写了一个组图示例，图例是可交互的并且效果很好，因为我对d3不熟悉，也许所使用的模式或标准不是很正式.

You need to get more understanding about object constancy. (Three state described by the author) I wrote an example of group chart in d3, the legend is interactable and works well, because i am new to d3, maybe the pattern or standard used is not very formal.

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

Listed it below only for you reference, hope it helps, good luck :-p

小提琴

这篇关于通过使用D3.js单击切换图例来重画堆栈栏聊天的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！