创建数据更改d3.js的转换

Question

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

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

还有一个setInterval函数，每3秒重绘一次图表。我怎样才能让它不是突然改变，而是通过缓和和过渡？ 以下是我的代码：

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);

以下是截图：

那么，你能帮我解决这些转变吗？

而且，另一个问题，正如你在屏幕截图中看到的，一些线条可能会相互淹没。我怎么能避免它？