Question

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

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

在DOM树中，点击图例后，矩形元素会被追加并添加到第一个组元素，而rect元素实际上只能更新。

中查看源代码

我希望类似于堆栈栏，其中图例选择为nvd3中实现的here

        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

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

1 个答案: