在nvd3结构中使用d3和json的多折线图
Multi line chart using d3 and json in a nvd3 structure
我试图使用json格式的d3和数据创建一个多折线图。由于某些原因,我的代码不能工作。我还没发现我哪里做错了。我在网上搜索了很多例子,但都无济于事。我可能把代码看瞎了。
在这个例子中,我只想画两条线,但是线的数量是未知的。所以我不能硬编码。有人能告诉我哪里做错了吗?
Jsfiddle链接到代码。http://jsfiddle.net/6qrcmsnj/3/
代码如下:
var w = 700;
var h = 600;
var pad = 80;
var time_format = d3.time.format("%I:%M:%S");
var gd = example_data(4);
var xScale = d3.time.scale()
.domain(d3.extent(gd[0].data, function(d) { return d[0]; }))
.range([pad, w - pad]);
var yScale = d3.scale.linear()
.domain([0, d3.max(gd[0].data, function(d) { return d[1]; })*2])
.range([h - pad, pad]);
var canvas = d3.select("body")
.append("svg")
.attr("class", "chart")
.attr("width", w)
.attr("height", h);
var xaxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickFormat(time_format);
var yaxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var line = d3.svg.line()
.x(function(d) { return xScale(d[0]); })
.y(function(d) { return yScale(d[1]); })
.interpolate("linear");
// Just for a grey background.
canvas.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "#E8E8E8");
// Add x-axis.
canvas.append("g")
.attr("class", "axis")
.attr("transform","translate(0," + (h - pad) + ")")
.call(xaxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", function(d) {
return "rotate(-65)"
});
// Add y-axis
canvas.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + pad + ", 0)")
.call(yaxis);
// Add line
canvas.selectAll("path")
.data(gd)
.enter().append("path")
.attr("d", line(gd.data))
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("fill", "none");
function example_data(val) {
if (val == "4") {
return [
{ "label" : "Data_1", "data" : [ [ 1404438592000, 21.09 ], [ 1404438593000, 10.85 ], [ 1404438594000, 15.74 ], [ 1404438595000, 20.86 ], [ 1404438596000, 10.83 ], [ 1404438597000, 8.92 ], [ 1404438598000, 23.68 ], [ 1404438599000, 20.68 ], [ 1404438600000, 14.68 ], [ 1404438601000, 4.65 ]] },
{ "label" : "Data_2", "data" : [ [ 1404438592000, 3.219 ], [ 1404438593000, 1.641 ], [ 1404438594000, 6.68 ], [ 1404438595000, 2.543 ], [ 1404438596000, 8.522 ], [ 1404438597000, 4.616 ], [ 1404438598000, 9.703 ], [ 1404438599000, 3.737 ], [ 1404438600000, 8.752 ], [ 1404438601000, 1.791 ]]}
];
}
}
@LarThoren方法当然可以工作,但是对于d3
,我们喜欢避免显式循环。你的版本遗漏了两件事:
canvas.selectAll(".series") //<-- don't selectAll with "path", there are other paths in the axis and you selection needs to be more specific
.data(gd)
.enter()
.append("path")
.attr("d", function(d){ //<-- gd is out of scope here, you need to use the accessor function
return line(d.data);
})
.attr("class", "series")
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("fill", "none");
完整工作代码:
var w = 700;
var h = 600;
var pad = 80;
var time_format = d3.time.format("%I:%M:%S");
var gd = example_data(4);
var xScale = d3.time.scale()
.domain(d3.extent(gd[0].data, function(d) { return d[0]; }))
.range([pad, w - pad]);
var yScale = d3.scale.linear()
.domain([0, d3.max(gd[0].data, function(d) { return d[1]; })*2])
.range([h - pad, pad]);
var canvas = d3.select("body")
.append("svg")
.attr("class", "chart")
.attr("width", w)
.attr("height", h);
var xaxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickFormat(time_format);
var yaxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var line = d3.svg.line()
.x(function(d) { return xScale(d[0]); })
.y(function(d) { return yScale(d[1]); })
.interpolate("linear");
// Just for a grey background.
canvas.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "#E8E8E8");
// Add x-axis.
canvas.append("g")
.attr("class", "axis")
.attr("transform","translate(0," + (h - pad) + ")")
.call(xaxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", function(d) {
return "rotate(-65)"
});
// Add y-axis
canvas.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + pad + ", 0)")
.call(yaxis);
// Add line
canvas.selectAll(".series")
.data(gd)
.enter()
.append("path")
.attr("d", function(d){
return line(d.data);
})
.attr("class", "series")
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("fill", "none");
function example_data(val) {
if (val == "4") {
return [
{ "label" : "Data_1", "data" : [ [ 1404438592000, 21.09 ], [ 1404438593000, 10.85 ], [ 1404438594000, 15.74 ], [ 1404438595000, 20.86 ], [ 1404438596000, 10.83 ], [ 1404438597000, 8.92 ], [ 1404438598000, 23.68 ], [ 1404438599000, 20.68 ], [ 1404438600000, 14.68 ], [ 1404438601000, 4.65 ]] },
{ "label" : "Data_2", "data" : [ [ 1404438592000, 3.219 ], [ 1404438593000, 1.641 ], [ 1404438594000, 6.68 ], [ 1404438595000, 2.543 ], [ 1404438596000, 8.522 ], [ 1404438597000, 4.616 ], [ 1404438598000, 9.703 ], [ 1404438599000, 3.737 ], [ 1404438600000, 8.752 ], [ 1404438601000, 1.791 ]]}
];
}
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
我将您的jsfiddle复制到下面可以查看的堆栈片段中。循环遍历数据,为每个帖子创建一行。
for(var i = 0; i < gd.length; i++)
{
canvas.append("path")
.data([gd[i].data])
.attr("d", line).attr("class", "line" + i);
}
var w = 700;
var h = 600;
var pad = 80;
var time_format = d3.time.format("%I:%M:%S");
var gd = example_data(4);
var xScale = d3.time.scale()
.domain(d3.extent(gd[0].data, function(d) {
return d[0];
}))
.range([pad, w - pad]);
var yScale = d3.scale.linear()
.domain([0, d3.max(gd[0].data, function(d) {
return d[1];
}) * 2])
.range([h - pad, pad]);
var canvas = d3.select("body")
.append("svg")
.attr("class", "chart")
.attr("width", w)
.attr("height", h);
var xaxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickFormat(time_format);
var yaxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var line = d3.svg.line()
.x(function(d) {
return xScale(d[0]);
})
.y(function(d) {
return yScale(d[1]);
})
.interpolate("linear");
// Just for a grey background.
canvas.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "#E8E8E8");
// Add x-axis.
canvas.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - pad) + ")")
.call(xaxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", function(d) {
return "rotate(-65)"
});
// Add y-axis
canvas.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + pad + ", 0)")
.call(yaxis);
for (var i = 0; i < gd.length; i++) {
// Add line
canvas.append("path")
.data([gd[i].data])
.attr("d", line).attr("class", "line" + i);
}
function example_data(val) {
if (val == "4") {
return [{
"label": "Data_1",
"data": [
[1404438592000, 21.09],
[1404438593000, 10.85],
[1404438594000, 15.74],
[1404438595000, 20.86],
[1404438596000, 10.83],
[1404438597000, 8.92],
[1404438598000, 23.68],
[1404438599000, 20.68],
[1404438600000, 14.68],
[1404438601000, 4.65]
]
}, {
"label": "Data_2",
"data": [
[1404438592000, 3.219],
[1404438593000, 1.641],
[1404438594000, 6.68],
[1404438595000, 2.543],
[1404438596000, 8.522],
[1404438597000, 4.616],
[1404438598000, 9.703],
[1404438599000, 3.737],
[1404438600000, 8.752],
[1404438601000, 1.791]
]
}];
}
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.line0 {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
.line1 {
fill: none;
stroke: red;
stroke-width: 1.5px;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
</head>
<body>
</body>
</html>
两个变化
.attr("d", line(gd.data))
.attr("d", function (d) { return line(d.data) })
和路径,然后添加轴。这应该行得通。基本上是selectAll('path')从轴元素中拾取路径元素。
相关文章:
- 用谷歌图表json数据绘制简单的折线图,日期在x轴上
- D3js:如何使用 JSON 数据绘制多系列折线图
- 来自 JSON 的 Dojo 折线图,具有多个系列和公共 x 轴
- 带有谷歌图表的JSP JSON - 折线图
- 如何修改谷歌折线图的 JSON 字符串
- 在 flot.js 中绘制折线图和条形图以获取 JSON 数据
- D3 中 JSON 数据的折线图
- gRaphael折线图:用JSON数据填充弹出标签而不是x&y坐标
- 为折线图提供一个本地json文件
- 本地折线图不同&使用NVD3创建远程json文件
- 将JSON文件加载到highcharts中以绘制折线图
- 在nvd3结构中使用d3和json的多折线图
- Highcharts动态折线图从json
- 多折线图D3.js Json数据结构
- 如何使用Json文件绘制折线图
- 1 个 html 页面上有 2 个不同的谷歌图表(1 个带有 JSON 的折线图和 3xgauge 硬编码)
- 我可以将此 JSON 提供给 D3 以绘制折线图吗?
- d3 JSON多折线图
- 如何在折线图中获得所有json值
- js在折线图上绘制两个json数据集