Old school D3 from simpler times

All examples By author By category About

iffy

Full window Github gist

line transition problem

<html>
    <head>
        <title>Chart</title>
        <style>
            path {
                stroke: #f00;
            }
            .line {
                stroke: #0f0;
                fill: none;
                stroke-width: 2px;
            }
            .rule {
                stroke: #ccc;
                stroke-width: 1px;
            }
        </style>
    </head>
    <body>
        <p>I want to get the chart below to transition such that
        the points on the lines appear to move up and down, not
        side to side.
        </p>
        <p>When transitioning to the smaller data-set especially,
        I'd like to not have a white gap appear before the lines
        take shape.
        </p>
        <p>Also, the grid-lines should slide into and out of
        existence, rather than appearing or disappearing.  Ideas?
        </p>
        <script src="https://d3js.org/d3.v2.min.js"></script>
        <script>
        var data = [
            [0,2,3,2,8],
            [2,4,1,5,3],
        ];
        var data2 = [
            [0,1,2,3,4,5],
            [9,8,7,6,5,6],
        ];
        var data3 = [
            [1,3,2],
            [0,8,5],
        ];
        
        var w = 300,
            h = 100;

var chart = d3.select('body').append('div')
            .attr('class', 'chart')
            .append('svg:svg')
            .attr('width', w)
            .attr('height', h);

var color = d3.scale.category10();

function drawdata(data, chart) {
            var num = data[0].length-1;
            var x = d3.scale.linear().domain([0, num]).range([0,w]);
            var y = d3.scale.linear().domain([0, 10]).range([h, 0]);
            
            var line = d3.svg.line()
                .x(function(d, i) { return x(i); })
                .y(function(d) { return y(d); });
            
            var flat = d3.svg.line()
                .x(function(d, i) { return x(i); })
                .y(y(-1));
            
            var lines = chart.selectAll('.line')
                .data(data);
            
            lines.enter().append('path')
                    .attr('class', 'line')
                    .style('stroke', function(d,i) { return color(i); })
                    .attr('d', line);
            
            lines.transition()
                .ease('linear')
                .duration(500)
                .attr('d', line);
            
            lines.exit().remove();
            
            // legend
            var ticks = chart.selectAll('line')
                .data(x.ticks(num));
            
            ticks.enter().append('line')
                    .attr('x1', x)
                    .attr('x2', x)
                    .attr('y1', 0)
                    .attr('y2', h)
                    .attr('class', 'rule');
            ticks.transition()
                .ease('linear')
                .duration(500)
                .attr('x1', x)
                .attr('x2', x)
                .attr('y1', 0)
                .attr('y2', h);
            ticks.exit().remove();
        }
        var dats = [data, data2, data3];
        function next() {
            var it = dats.shift();
            dats.push(it);
            drawdata(it, chart);
        }
        setInterval(next, 2000);
        next();
        </script>
    </body>
</html>

Modified http://d3js.org/d3.v2.min.js to a secure url

https://d3js.org/d3.v2.min.js