d3.js:访问数组内的对象属性创建线图

Question

我试图使用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}
        ]

对象的索引号是x值，“video_views”是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);

感谢任何帮助。多谢阅读。

Answer 1

一个可能的解决方案：

对象的索引号是x值...：使用d3将x刻度的domain更改为输入索引数组。range():

// Scale values
var Line_xScale = d3.scale.linear()
    .domain(d3.range(dataset1.length))
    .range([0, Line_Graph_Width]);

...并且“video_views”是Y值。范围已更改，因此更大的值位于顶部：

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

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的stroke是白色的，所以即使一切正常，您也看不到任何东西。

参见jsbin中的示例。

使用group.selectall('path').data(dataset1).enter().append('path')，您不仅可以添加一个path，还可以添加dataset1.length路径元素。