Question

尝试开发堆叠图表插件。

_但是有一些问题，但a）有多个图表b）更新图表

我已经尝试分解构建图表所需的代码并更新它/处理块/变形。我想我需要添加转换 - 在负责添加堆积图表块的代码上输入/退出/删除。

buildChart: function(data, w, h, yLabel){

                        var that = this;

                        var margin = {top: 30, right: 55, bottom: (h * 0.56), left: 95},
                            width = w - margin.left - margin.right,
                            height = h - margin.top - margin.bottom;

                        this.x = d3.scale.ordinal()
                            .rangeRoundBands([0, width], .1);

                        this.y = d3.scale.linear()
                            .rangeRound([height, 0]);

                        var colorArray = ["#538ed5", "#953735", "#e46d0a", "#75923c", "#b2a1c7", "#dc143c", "#87cefa", "#90ee90", "#add8e6", "#d3d3d3", "#cf1256", "#12cf5e"];  

                        this.color = d3.scale.ordinal()
                            .range(colorArray);


                        var xAxis = d3.svg.axis()
                            .scale(this.x)
                            .orient("bottom");

                        var yAxis = d3.svg.axis()
                            .scale(this.y)
                            .orient("left")
                            //.tickFormat(d3.format(".2s"));

                            var chartWidth = parseInt(width + margin.left + margin.right,10);
                            var chartHeight = parseInt(height + margin.top + margin.bottom,10);


                        var svg = d3.select(methods.el["selector"])
                            .append("svg")
                                .attr("class", "stackedchart")
                                .attr("width", chartWidth)
                                .attr("height", chartHeight)
                                .attr('viewBox', "0 0 "+chartWidth+" "+chartHeight)
                                .attr('perserveAspectRatio', "xMinYMid")
                            .append("g")
                                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

                        this.color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Label"; }));


                        data.forEach(function(d) {
                            var y0 = 0;
                            d.blocks = that.color.domain().map(function(name) {
                                return {name: name, values: d[name], y0: y0, y1: y0 += +d[name]}; 
                            });
                            d.total = d.blocks[d.blocks.length - 1].y1;
                        });

                          this.x.domain(data.map(function(d) { return d.Label; }));
                          this.y.domain([0, d3.max(data, function(d) { return d.total; })]);

                          svg.append("g")
                            .attr("class", "x axis")
                            .attr("transform", "translate(0," + height + ")")
                            .call(xAxis);

                          svg.append("g")
                            .attr("class", "y axis")
                            .call(yAxis)
                            .append("text")
                                .attr("transform", "rotate(-90)")
                                .attr("y", 6)
                                .attr("dy", "-3.5em")
                                .style("text-anchor", "end")
                                .text(yLabel);

                            var xlabels = svg.selectAll(".x.axis text")  
                                .attr("transform", "rotate(-60) translate(-10,-10)")


                            that.manageStack(svg, data);


                            that.buildLegend();
                            //that.resizeChart();


                    }

d3.js堆积图表插件

0 个答案: