Javascript D3.js：访问数组内的对象属性以创建线图

我正在尝试使用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} ] var数据集1=[ {“视频名称”：“苹果”，“视频视图”：100}， {“视频名称”：“橙子”，“视频视图”：35}， {“视频名称”：“葡萄”，“视频视图”：20}， {“视频名称”：“鳄梨”，“视频视图”：85}， {“视频名称”：“西红柿”，“视频视图”：60} ] 对象的索引号为x值，“视频视图”为y值

问题是：它添加了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); //标度值 var linexscale=d3.scale.linear（） .domain（[01100]） .范围（[0，线条图宽度]）； var Line_yScale=d3.scale.linear（） .domain（[01100]） .范围（[0，直线图高度]）； //这就是我怀疑问题所在的地方// //SVG路径等于行 var Path_var=d3.svg.line（） .x（功能（d，i）{ 返回i*10； }) .y（功能（d）{ 返回线刻度（d.视频视图）； }); //将元素与数据连接起来 group.selectAll（'path'）） .数据（数据集1） .输入（） .append（'路径'） .attr（'d'，路径变量） .attr（'填充'，'无'） .attr（'stroke'，'#fff'） .attr（“笔划宽度”，2）；

---

感谢您的帮助。谢谢你的阅读

您将

xScale

定义为

[0-100]

，但值是

[0-400]

且不在SVG视图中，如中所设置

.x(function(d, i) {
    return i * 100;
})

尝试将

xScale

的范围设置为0到400

一种可能的解决方案：

对象的索引号是x值…：

使用
d3.range（）
将x比例的域更改为输入索引数组：

。。。“视频视图”是y值。
范围
更改，因此顶部的值更大：

var Line_yScale = d3.scale.linear()
    .domain([0, 100])
    .range([Line_Graph_Height, 0]);

更改线条的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);
    });

并使用以下命令追加第行：

group.append('path')
        .attr('d', Path_Var(dataset1)) 
        .attr('fill', 'none')
        .attr('stroke', '#000')
        .attr('stroke-width', 2);

#fff的

笔划为白色，所以即使一切正常，你也看不到任何东西

看

---

使用

group.selectAll（'path'）.data（dataset1）。enter（）.append（'path'）

不仅可以添加一个路径，还可以添加dataset1.length路径元素。

刚刚更改为.x（函数…返回i*10；仍然没有运气。Troke是白色的，但背景是蓝色的。老兄，我想给你一个拥抱。我在这上面已经三天了，没有任何进展。问题解决了。谢谢！

group.append('path')
        .attr('d', Path_Var(dataset1)) 
        .attr('fill', 'none')
        .attr('stroke', '#000')
        .attr('stroke-width', 2);