d3過渡堆積條形圖

Question

您好我目前在d3中有一個堆積條形圖，js目前不會轉換。 該圖表能夠更新，但遺憾的是沒有過渡:(我感覺有1行修復此問題。請幫助!!!從http://bl.ocks.org/anotherjavadude/2940908獲取此信息

<!DOCTYPE html>
<html>
    <head>
        <title>Simple Stack</title>
        <script src="http://d3js.org/d3.v3.js"></script>     
        <style>
            svg {
                border: solid 1px #ccc;
                font: 10px sans-serif;
                shape-rendering: crispEdges;
            }
        </style>             
    </head>
    <body>

        <div id="viz"></div>

        <script type="text/javascript">

            var w = 960,
            h = 500

            // create canvas
            var svg = d3.select("#viz").append("svg:svg")
            .attr("class", "chart")
            .attr("width", w)
            .attr("height", h )
            .append("svg:g")
            .attr("transform", "translate(10,470)");

            x = d3.scale.ordinal().rangeRoundBands([0, w-800])
            y = d3.scale.linear().range([0, h-100])
            z = d3.scale.ordinal().range(["blue", "lightblue"])





            // console.log("RAW MATRIX---------------------------");
        // 3 columns: ID,c1,c2
            var matrix = [
                [ 1,  5871, 8916]
            ];
            // console.log(matrix)
            var matrix2 = [
                [ 1,  21, 800]
            ];


            function rand_it(x){
              return Math.floor((Math.random() * x) + 1);
            }


            function render(matrix){

                var t = d3.transition()
                          .duration(300);

                // remove
                svg.selectAll("g.valgroup")
                   .remove();

                svg.selectAll("rect")
               .transition(t)               
               .remove();

                var remapped =["c1","c2"].map(function(dat,i){
                    return matrix.map(function(d,ii){
                        return {x: ii, y: d[i+1] };
                    })
                });
                console.log("NEW ONE !!!\n",matrix[0]);

                // console.log("LAYOUT---------------------------");
                var stacked = d3.layout.stack()(remapped)

                x.domain(stacked[0].map(function(d) { return d.x; }));
                y.domain([0, d3.max(stacked[stacked.length - 1], function(d) { return d.y0 + d.y; })]);

                // Add a group for each column.
                var valgroup = svg.selectAll("g.valgroup")
                .data(stacked) 
                .enter().append("svg:g")
                .classed("valgroup", true)
                .style("fill", function(d, i) { return z(i); })
                .style("stroke", function(d, i) { return d3.rgb(z(i)).darker(); });

                // Add a rect for each date.
                var rect = valgroup.selectAll("rect")
                .data(function(d){return d;})
                .enter().append("svg:rect")
                .transition(t)
                .attr("x", function(d) { return x(d.x); })
                .attr("y", function(d) { return -y(d.y0) - y(d.y); })
                .attr("height", function(d) { return y(d.y); })
                .attr("width", x.rangeBand());

                // column
                rect.selectAll("rect")
                    .transition() // this is to create animations
                    .duration(500) // 500 millisecond
                    .ease("bounce")
                    .delay(500)
                    .attr("x", function(d) { return x(d.x); })
                    .attr("y", function(d) { return -y(d.y0) - y(d.y); })
                    .attr("height", function(d) { return y(d.y); })
                    .attr("width", x.rangeBand());          

            };

            render(matrix);
            setInterval( function() { render([[1, rand_it(10), rand_it(50)]]); console.log("2"); }, 5000 );


        </script>
    </body>
</html>

Answer 1

您沒有正確使用transition() 。 轉換從先前值更改為最終值。 所以，在這段代碼中：

var something = svg.append("something").attr("x", 10);
something.transition().duration(500).attr("x", 20);

某事物的x屬性將在500毫秒內從10變為20。

但是，當你這樣做時，就像你一樣：

var rect = valgroup.selectAll("rect")
            .data(function(d){return d;})
            .enter().append("svg:rect")
            .transition(t)
            .attr("x", function(d) { return x(d.x); })
            .attr("y", function(d) { return -y(d.y0) - y(d.y); })
            .attr("height", function(d) { return y(d.y); })
            .attr("width", x.rangeBand());

以前的值在哪里？ 這是一個“輸入”選擇。 為了使事情變得更復雜，你做了：

svg.selectAll("rect")
           .transition(t)               
           .remove();

在函數的開頭，因此，沒有矩形可以進行任何轉換。

我在您的代碼中進行了一些更改，刪除了remove()並創建了一些“更新”選項： https ： //jsfiddle.net/gerardofurtado/3ahrabyj/

請記住，這不是一個優化的代碼，更不是一個漂亮的代碼：我只做了最小的改動，使轉換工作，你將不得不在這里做了很多改進。

d3過渡堆積條形圖

問題描述

1 個解決方案

解決方案1
0 已采納 2016-09-27 15:08:49

d3過渡堆積條形圖

問題描述

1 個解決方案

解決方案1 0 已采納 2016-09-27 15:08:49

解決方案1
0 已采納 2016-09-27 15:08:49