在数据更改d3.js上创建过渡

Question

我正在尝试创建一个基本上上面有许多水平线的图表。 这些行的数据来自生成随机对象数组的函数，如下所示：

{
    "process": 2,
    "time": 5
}

还有一个setInterval函数，每隔3s重绘一次图表。 我如何才能使它不那么突然地改变，而是随着缓和和过渡而改变？ 这是我的代码如下：

的HTML：

<div class="container">
    <div class="jumbotron"><h3>Operating System Processes Model</h3></div>
    <div class="enter">Enter the number of processes: </div>
    <input type="number" min="0" max="30" id="input">
</div>
<svg id="visualisation" width="1000" height="500"></svg>

utils.js：

// Renders grid in the system of axes
function renderGrid() {
    // Vertical lines
    for(var i = 5; i <= 50; i+=5) {
        vis.append('svg:path')
            .attr('d', lineGen(
                [
                    {
                        "process": "0",
                        "time": + i
                    },
                    {
                        "process": "50",
                        "time": + i
                    },
                ]
            ))
            .attr('stroke', '#777')
            .attr('stroke-dasharray', "5,5")
            .attr('stroke-width', 1)
            .attr('fill', 'none');
        // Horizontal lines
        vis.append('svg:path')
            .attr('d', lineGen(
                [
                    {
                        "process": i,
                        "time": "0"
                    },
                    {
                        "process": i,
                        "time": "50"
                    },
                ]
            ))
            .attr('stroke', '#777')
            .attr('stroke-dasharray', "5,5")
            .attr('stroke-width', 1)
            .attr('fill', 'none');
    };
}

// Generate single line
var lineGen = d3.svg.line()
                    .x(function(d) {
                        return xScale(d.time);
                    })
                    .y(function(d) {
                        return yScale(d.process);
                    })
                    .interpolate("basis");

// Generate random color
function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

// Generate random data array
function getDataArray(count) {
    var array = [];
    for(var i = 0; i < count; ++i) {

        var proc = Math.round(Math.random() * (50 - 1)) + 1;
        var time1 = Math.round(Math.random() * (50 - 1)) + 1;
        var time2 = Math.round(Math.random() * (50 - 1)) + 1;

        var data = [
            {
                "process": proc,
                "time": Math.max(time1, time2)
            },
            {
                "process": proc,
                "time": Math.min(time1, time2)
            },
        ];

        array.push(data);

    }
    return array;
}

// Generate random data
function renderProcesses() {

    vis.selectAll('.line-process').remove();

    // var processCount = Math.round(Math.random() * (50 - 1)) + 1;
    var processCount = document.getElementById('input').value;

    var arr = getDataArray(processCount);

    for(var i = 0; i < processCount; ++i) {

        var processLength = Math.round(Math.random() * (50 - 1)) + 1;

        var color = getRandomColor();

        vis.append('svg:path')
            .attr('class', 'line-process')
            .attr('d', lineGen(arr[i]))
            .attr('stroke', color)
            .attr('stroke-width', 5)
            .attr('stroke-linecap', 'round')
            .attr('fill', 'none')

            .on("mouseover", function() {
                d3.select(this)
                    .attr('stroke', "#1abc9c");
            })
            .on("mouseout", function() {
                d3.select(this)
                    .attr('stroke', color)
            });
    }
}

axis.js：

// Draw the axis

var vis = d3.select("#visualisation"),
    width = 1000,
    height = 500,
    margins = {
        top: 20,
        right: 20,
        bottom: 20,
        left: 50
    },
    xScale = d3.scale.linear().range([margins.left, width - margins.right]).domain([0,50]),
    yScale = d3.scale.linear().range([height - margins.top, margins.bottom]).domain([0,50]),
    xAxis = d3.svg.axis()
                .scale(xScale),
    yAxis = d3.svg.axis()
                .scale(yScale)
                .orient('left');

vis.append("svg:g")
    .transition()
    .attr("transform", "translate(0," + (height - margins.bottom) + ")")
    .attr("class", "axis")
    .call(xAxis);

vis.append("svg:g")
    .transition()
    .attr("transform", "translate(" + (margins.left) + ",0)")
    .attr("class", "axis")
    .call(yAxis);

轴的样式：

.axis {

    path {
        fill: none;
        stroke: #777;
        shape-rendering: crispEdges;
    }

    text {
        font-family: Lato;
        font-size: 12px;
    }
}

最后，main.js：

renderGrid();
setInterval(renderProcesses, 3000);

这是屏幕截图：

那么，您能帮我完成这些过渡吗？

而且，正如您在屏幕截图中看到的那样，另一个问题是，有些行可能会相互淹没。 我该如何避免呢？