0

積み上げグラフ アプリケーションを開発しています。

http://jsfiddle.net/NYEaX/174/

複数のインスタンスなどを作成するためにjqueryプラグイン内に配置しました...異なるプロパティと最終的に異なるデータソース。

今のところ、チャート バーと軸のアニメーション化に問題があります。

バーコードをアニメーション化

animateBars: function(selector, data){

                        var w = $(selector).data("width");
                        var h = $(selector).data("height");

                        var margin = methods.getMargin(h);                      
                        methods.setDimensions(w, h, margin);

                        //methods.setX();
                        //methods.setY();

                        //methods.setDomain(data);


                        var initialHeight = 0;

                        //var svg = d3.select(selector + " .stackedchart");

                        var barholder = d3.select(selector + " .barholder");


                        var state = barholder.selectAll(".state")
                          .data(data)
                            .enter()
                                .append("g")
                                .attr("class", "g")
                                .attr("x", function(d) { 
                                    return methods.x(d.Label); 
                                })
                                .attr("transform", function(d) { 
                                    return "translate(" + methods.x(d.Label) + ",0)";
                                });

                        var bar = state.selectAll("rect")
                            .data(function(d) {
                                return d.blocks; 
                            });

                        // Enter
                         bar.enter()
                            .append("rect")
                            .attr("width", methods.x.rangeBand())                     
                            .attr("y", function(d) { 
                                return methods.y(d.y1); 
                            })
                            .attr("height", function(d) { 
                                return methods.y(d.y0) - methods.y(d.y1); 
                            })
                            .style("fill", function(d) { 
                                return methods.color(d.name); 
                            });

                        // Update
                        bar
                            .attr("y", function(d) { 
                                return methods.y(d.y1); 
                            })
                            .attr("height", function(d) {
                                return methods.y(d.y0) - methods.y(d.y1);
                            })
                            .transition()
                            .duration(500)
                            .attr("x", function(d) {
                                return methods.x(d.Label);
                            })
                            .attr("width", methods.x.rangeBand())
                            .attr("y", function(d) {
                                return methods.y(d.y1);
                            })
                            .attr("height", function(d) {
                                return methods.y(d.y0) - methods.y(d.y1);
                            });

                        // Exit
                        bar.exit()
                            .transition()
                            .duration(250)
                            .attr("y", function(d) {
                                return methods.y(d.y1);
                            })
                            .attr("height", function(d) {
                                return methods.y(d.y0) - methods.y(d.y1);
                            })
                            .remove();

                    }
4

1 に答える 1

0

1 つの問題は、「状態」が「enter()」メソッドから生成されるため、更新時ではなく、「g.class」の生成時にのみすべての「bar」呼び出しが実行されることです。これを変える：

 var state = barholder.selectAll(".state")
                      .data(data)
                         .enter()
                            .append("g")...

これに：

 var state = barholder.selectAll(".state")
                      .data(data);
 state.enter().append("g")...

それが少し役立つかどうかを確認してください。フィドルには影響しないようですが、d3 以外の問題が発生している可能性があります。フィドルを単純化して、最初に d3 を単独で動作させてみてください。

于 2014-03-06T00:58:26.783 に答える