Question

您好我目前在d3中有一个堆积条形图，js当前不会转换。图表能够更新，但遗憾的是没有过渡:( 我觉得这有一线修复。请帮忙！！！从中得到了这个 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 个答案: