Javascript 在nvd3结构中使用d3和json的多折线图
我正在尝试使用d3和json格式的数据创建一个多折线图。由于某种原因,我的代码无法工作。我没能找出我做错了什么。我在网上搜索并阅读了很多例子,但都无济于事。我可能对密码视而不见Javascript 在nvd3结构中使用d3和json的多折线图,javascript,jquery,canvas,d3.js,svg,Javascript,Jquery,Canvas,D3.js,Svg,我正在尝试使用d3和json格式的数据创建一个多折线图。由于某种原因,我的代码无法工作。我没能找出我做错了什么。我在网上搜索并阅读了很多例子,但都无济于事。我可能对密码视而不见 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.e
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 ]]}
];
}
}
在这个例子中,我只想画两条线,但线的数量是未知的。所以我不能硬编码。有人知道我哪里做错了吗
Jsfiddle链接到代码
这也是代码
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 ]]}
];
}
}
我将您的JSFIDLE复制到可以在下面查看的堆栈片段中。在数据中循环,为每个帖子创建一行
for(var i = 0; i < gd.length; i++)
{
canvas.append("path")
.data([gd[i].data])
.attr("d", line).attr("class", "line" + i);
}
@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");
。轴路径,
.轴线{
填充:无;
笔画:黑色;
形状渲染:边缘清晰;
}
两个变化
.attr(“d”,行(gd.data))
应该是
.attr(“d”,函数(d){返回行(d.data)})
和路径,然后添加轴。它应该会起作用。基本上选择All(“路径”),从axis元素中拾取路径元素 这实际上只是一个输入错误,最终出现在我的JSFIDLE示例中。原始代码具有整个功能行。谢谢你让我意识到这一点。非常感谢。缺少的“功能”部分只是一个打字错误。原始代码中有完整的一行。不知道为什么我的JSFIDLE没有。“selectAll”部分成功了。终于开始工作了。经过数小时的搜索和阅读,解决方案就这么简单。但我自己可能不会发现。非常感谢。谢谢你的建议。但是canvas.selectAll(“path”).data(gd.enter().append(“path”).attr(“d”,函数(d){returnline(gd.data);});做同样的事情。在数据中循环,为每个数据创建一行。