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值，＆＃34; video_views＆＃34;是y值。

问题：它附加了svg画布，并且＆＃34; g＆＃34;元素很好，但是没有检测到图中每个点的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值... ：x scale的domain使用d3.range()更改为输入索引数组：

// 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的{p> stroke是白色的，所以即使一切正常，你也什么都看不见。

请参阅example at jsbin。

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

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

2 个答案: