如何使用d3制作实时多线图，其中数据来自json格式的api

Question

I am trying to produce multi line real time chart with d3.js. 我正在尝试使用d3.js生成多线实时图表。 And data i am getting is in json format by repeatedly calling api. 通过重复调用api，我得到的数据为json格式。 How can i repeatedly call api. 我如何反复调用api。 Here is my working code. 这是我的工作代码。

 <!DOCTYPE html>
 <html>
<head>
    <meta charset="utf-8">

    <style>
    body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    .graph .axis {
        stroke-width: 1;
    }

    .graph .axis .tick line {
        stroke: black;
    }

    .graph .axis .tick text {
        fill: black;
        font-size: 0.7em;
    }

    .graph .axis .domain {
        fill: none;
        stroke: black;
    }

    .graph .group {
        fill: none;
        stroke: black;
        stroke-width: 1.5;
    }
    </style>
</head>
<body>
    <div class="graph"></div>

    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>
    var limit = 60 * 1,
        duration = 750,
        now = new Date(Date.now() - duration)

    var width = 500,
        height = 200

    var groups = {
        current: {
            value: 0,
            color: 'orange',
            data: d3.range(limit).map(function() {
                return 0
            })
        },
        target: {
            value: 0,
            color: 'green',
            data: d3.range(limit).map(function() {
                return 0
            })
        },
        output: {
            value: 0,
            color: 'grey',
            data: d3.range(limit).map(function() {
                return 0
            })
        }
    }

    var x = d3.time.scale()
        .domain([now - (limit - 2), now - duration])
        .range([0, width])

    var y = d3.scale.linear()
        .domain([0, 100])
        .range([height, 0])

    var line = d3.svg.line()
        .interpolate('basis')
        .x(function(d, i) {
            return x(now - (limit - 1 - i) * duration)
        })
        .y(function(d) {
            return y(d)
        })

    var svg = d3.select('.graph').append('svg')
        .attr('class', 'chart')
        .attr('width', width)
        .attr('height', height + 50)

    var axis = svg.append('g')
        .attr('class', 'x axis')
        .attr('transform', 'translate(0,' + height + ')')
        .call(x.axis = d3.svg.axis().scale(x).orient('bottom'))

    var paths = svg.append('g')

    for (var name in groups) {
        var group = groups[name]
        group.path = paths.append('path')
            .data([group.data])
            .attr('class', name + ' group')
            .style('stroke', group.color)
    }

    function tick() {
    now = new Date()

        // Add new values
        for (var name in groups) {
            var group = groups[name]
            //group.data.push(group.value) // Real values arrive at irregular intervals
            group.data.push(20 + Math.random() * 100)
            group.path.attr('d', line)
        }

        // Shift domain
        x.domain([now - (limit - 2) * duration, now - duration])

        // Slide x-axis left
        axis.transition()
            .duration(duration)
            .ease('linear')
            .call(x.axis)

        // Slide paths left
        paths.attr('transform', null)
            .transition()
            .duration(duration)
            .ease('linear')
            .attr('transform', 'translate(' + x(now - (limit - 1) * duration) + ')')
            .each('end', tick)

        // Remove oldest data point from each group
        for (var name in groups) {
            var group = groups[name]
            group.data.shift()
        }
    }

    tick()
    </script>
</body>

In this code new data is randomly generated. 在此代码中，将随机生成新数据。 How i can i update it with my json data from api for real time. 我如何使用api中的json数据实时更新它。

Advance thanks for help. 预先感谢您的帮助。

Answer 1

You need an endpoint on API side which provides you with the data, and get that data using fetch . 您需要在API端提供数据的端点，并使用fetch数据。 Then you need to pass the data through the function you have to write that will generate code similar to above. 然后，您需要通过必须编写的函数传递数据，该函数将生成与上面类似的代码。

That will be for getting data once. 那将是一次获取数据。 You can set that on interval, but best solution would be using socket.io, which needs to be implemented on the server side and in your js code. 您可以设置间隔，但是最好的解决方案是使用socket.io，它需要在服务器端和js代码中实现。

如何使用d3制作实时多线图，其中数据来自json格式的api

问题描述

1 个解决方案

解决方案1
1 2018-01-20 07:32:22

如何使用d3制作实时多线图，其中数据来自json格式的api

问题描述

1 个解决方案

解决方案1 1 2018-01-20 07:32:22

解决方案1
1 2018-01-20 07:32:22