Question

我一直在使用Mike Bostock的堆积条形图（这里：https://bl.ocks.org/mbostock/4679202）。

我已成功进行了一些修改，但我坚持的是尝试添加带有刻度和正确缩放值的y轴。

我认为只需使用此功能即可完成：

var yAxisRight = d3.svg.axis().scale(y2) //define ticks
    .orient("right").ticks(5);

然而，这导致仅用于整个Y轴的一组堆栈的值。这导致不正确的比例。需要使用COMBINED所有堆栈范围的值来确定我认为的值的范围。

有一种简单的方法可以解决这个问题吗？总结所有列的范围。

如果没有，我如何编写一个函数来根据所有4列中的值设置范围？

这是我现在所拥有的JSfiddle（这是不正确的）： https://jsfiddle.net/1jhm7ths/

Answer 1

如果我理解了您要尝试实现的目标，则需要根据堆叠数据计算范围，而不是原始数据。我updated your jsFiddle在第92行进行了以下修改：

 handler: function () {

            var fileName = 'fileName.xlsx'

            Ext.Ajax.request({      
                method: 'GET',
                loadMask: true,
                url: 'ReportingWebServices.asmx/GetExcel',
                params: {
                    'sessionId': reportingSelectedSessionGUID,
                    'userId': reportingSelectedUserGUID,
                    'timeId': reportingSelectedTimeGUID,
                    'hierarchyGroupId': reportingSelectedHierarchyGroupGUID,
                    'nodeId': reportingSelectedNodeGUID,
                    'memberId': reportingSelectedMemberGUID,
                    'fileName': fileName // Pass the filename to the controller
                },
                success: function (response, opts) {

                    Ext.DomHelper.append(Ext.getBody(), {
                        tag: 'iframe',
                        frameBorder: 0,
                        width: 0,
                        height: 0,
                        css: 'display:none;visibility:hidden;height:0px;',
                        src: '../Temp/' + fileName // Grab that same file that's created
                    });
                }
            })
        }

这样做是为了获取每个组，计算所有值的总和，以及取最大值。

另一方面，我会劝阻学习d3 v3并尝试专注于v4以获得长期支持，最新功能，模块化和其他许多优势。

如何将正确缩放的y轴添加到堆叠的d3条形图中

1 个答案: