[英]D3.js: Accessing Object Property inside Array for Creating Line Graph
I'm trying to create a line graph using d3.js with this data structure:我正在尝试使用具有以下数据结构的 d3.js 创建折线图:
var dataset1 = [ {"video_name": "Apples", "video_views": 100}, {"video_name": "Oranges", "video_views": 35}, {"video_name": "Grapes", "video_views": 20}, {"video_name": "Avocados", "video_views": 85}, {"video_name": "Tomatoes", "video_views": 60} ]
The index number of the object is the x-value and the "video_views" is the y-value.对象的索引号是 x 值,“video_views”是 y 值。
The problem: It is appending the svg canvas, and the "g" element just fine, but the x and y values for each point in the graph are not being detected, so nothing is showing up.问题:它附加了 svg 画布,“g”元素就好了,但是没有检测到图中每个点的 x 和 y 值,所以没有显示任何内容。
// Scale values var Line_xScale = d3.scale.linear() .domain([0, 100]) .range([0, Line_Graph_Width]); var Line_yScale = d3.scale.linear() .domain([0, 100]) .range([0, Line_Graph_Height]); // This is where I suspect the problem is. // // SVG path equal to line var Path_Var = d3.svg.line() .x(function(d, i) { return i * 10; }) .y(function(d) { return Line_yScale(d.video_views); }); // Connect Element with Data group.selectAll('path') .data(dataset1) .enter() .append('path') .attr('d', Path_Var) .attr('fill', 'none') .attr('stroke', '#fff') .attr('stroke-width', 2);
Any help is appreciated.任何帮助表示赞赏。 Thanks for reading.谢谢阅读。
You define xScale
to be [ 0 - 100 ]
but values are [ 0 - 400 ]
and out of SVG view, as set in您将xScale
定义为[ 0 - 100 ]
但值为[ 0 - 400 ]
并且在 SVG 视图之外,如设置
.x(function(d, i) {
return i * 100;
})
Try set range of xScale
from 0 to 400尝试将xScale
范围设置为 0 到 400
One possible solution:一种可能的解决方案:
The index number of the object is the x-value... : domain
of x scale is changed to array of input indexes using d3.range()
:对象的索引号是 x 值... :使用d3.range()
将 x 尺度的domain
更改为输入索引数组:
// Scale values
var Line_xScale = d3.scale.linear()
.domain(d3.range(dataset1.length))
.range([0, Line_Graph_Width]);
... and the "video_views" is the y-value. ...而“video_views”是 y 值。 : range
is changed so greater values are at the top: : range
已更改,因此较大的值位于顶部:
var Line_yScale = d3.scale.linear()
.domain([0, 100])
.range([Line_Graph_Height, 0]);
x value of line is changed to calculate width of one point:更改线的 x 值以计算一点的宽度:
var Path_Var = d3.svg.line()
.x(function(d, i) {
return i * Line_Graph_Width / dataset1.length;
})
.y(function(d) {
return Line_yScale(d.video_views);
});
and line is appended using:并使用以下方法附加行:
group.append('path')
.attr('d', Path_Var(dataset1))
.attr('fill', 'none')
.attr('stroke', '#000')
.attr('stroke-width', 2);
stroke
of #fff is white so you'd see nothing even if everything is right. #fff 的stroke
是白色的,因此即使一切正常,您也看不到任何东西。
See example at jsbin .请参阅jsbin 中的示例。
Using group.selectAll('path').data(dataset1).enter().append('path')
you would add not just one path but dataset1.length path elements.使用group.selectAll('path').data(dataset1).enter().append('path')
您不仅可以添加一条路径,还可以添加 dataset1.length 路径元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.