如何在从Json获取数据的同时使用d3制作实时多折线图？_Json_D3.js_Linechart

如何在从Json获取数据的同时使用d3制作实时多折线图？

json d3.js

如何在从Json获取数据的同时使用d3制作实时多折线图？,json,d3.js,linechart,Json,D3.js,Linechart,我是D3的新手，我想在从json对象获取数据的同时使用D3.js制作一个多折线图。有人可以指导我。下面是工作示例代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

我是D3的新手，我想在从json对象获取数据的同时使用D3.js制作一个多折线图。有人可以指导我。下面是工作示例代码

 <!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>


身体{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
}
.图.轴{
笔画宽度：1；
}
.图形.轴.刻度线{
笔画：黑色；
}
.graph.axis.tick文本{
填充：黑色；
字体大小：0.7em；
}
.graph.axis.domain{
填充：无；
笔画：黑色；
}
.图.组{
填充：无；
笔画：黑色；
笔画宽度：1.5；
}
var限值=60*1，
持续时间=750，
现在=新日期（Date.now（）-持续时间）
可变宽度=500，
高度=200
变量组={
当前：{
值：0，
颜色：“橙色”，
数据：d3.range（limit）.map（function（）{
返回0
})
},
目标：{
值：0，
颜色：“绿色”，
数据：d3.range（limit）.map（function（）{
返回0
})
},
输出：{
值：0，
颜色：“灰色”，
数据：d3.range（limit）.map（function（）{
返回0
})
}
}
var x=d3.time.scale（）
.domain（[now-（limit-2），now-duration]）
.范围（[0，宽度]）
变量y=d3.scale.linear（）
.domain（[01100]）
.范围（[高度，0]）
var line=d3.svg.line（）
.插入（'基础'）
.x（功能（d，i）{
返回x（现在-（限制-1-i）*持续时间）
})
.y（功能（d）{
返回y（d）
})
var svg=d3.select（'.graph'）.append（'svg'））
.attr（'类'，'图表'）
.attr（'width'，width）
.attr（'高度'，高度+50）
var axis=svg.append（'g'）
.attr（'class'，'x轴'）
.attr（'transform'，'translate（0'，+height+'））
.call（x.axis=d3.svg.axis（）.scale（x.orient（'bottom'））
var path=svg.append（'g'）
for（组中的变量名称）{
变量组=组[名称]
group.path=path.append（'path'）
.data（[group.data]）
.attr（'类'，名称+'组'）
.style（'stroke'，group.color）
}
函数tick（）{
现在=新日期（）
//添加新值
for（组中的变量名称）{
变量组=组[名称]
//group.data.push（group.value）//实际值以不规则的间隔到达
group.data.push（20+Math.random（）*100）
group.path.attr（'d'，行）
}
//移位域
x、 域（[现在-（限制-2）*持续时间，现在-持续时间]）
//向左滑动x轴
轴.过渡（）
.持续时间（持续时间）
.ease（“线性”）
.呼叫（x轴）
//左滑道
paths.attr（'transform'，null）
.transition（）
.持续时间（持续时间）
.ease（“线性”）
.attr（'transform'，'translate（'+x（现在-（限制-1）*持续时间）+'））
.每个（'结束'，勾选）
//从每个组中删除最旧的数据点
for（组中的变量名称）{
变量组=组[名称]
group.data.shift（）
}
}
勾选（）

但我需要一张直线运行的折线图，在某些点上的bum取决于数值，所以这里是图表的图像，我需要任何帮助，将不胜感激。

Sorry@Hassan-我看不出

Angular.js

如何符合这个问题？这是问题的一部分，还是这只是一个纯粹的

D3.js

问题？@Ian忽略angularjs其纯粹的D3.js问题可能与@Ian重复，但我需要多行而不是单次从js获取数据。方法是一样的，所以使用该方法并将其应用于多个系列。如果您在应用该方法时遇到了特定问题，那么可以自由地问另一个问题，但对于我个人来说，要回答这个问题，我将直接使用该代码并对其进行修改，直到我实现了您想要的图表。您最好经历一下这个过程，并了解

D3

是如何正常工作的