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

您将xScale定义为[ 0 - 100 ]但值为[ 0 - 400 ]并且在 SVG 视图之外，如设置

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

尝试将xScale范围设置为 0 到 400

Answer 2

一种可能的解决方案：

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

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

...而“video_views”是 y 值。 ： range已更改，因此较大的值位于顶部：

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

请参阅jsbin 中的示例。

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