Я пытаюсь создать линейный график, используя 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);

Любая помощь приветствуется. Спасибо за чтение.

0
dmr07 10 Июн 2014 в 00:30

2 ответа

Лучший ответ

Одно из возможных решений:

Номер индекса объекта - это значение x ... : domain шкалы x заменяется на массив входных индексов с использованием 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);

stroke из #fff белого цвета, поэтому вы ничего не увидите, даже если все в порядке.

См. пример на jsbin.

Используя group.selectAll('path').data(dataset1).enter().append('path'), вы добавляете не только один путь, но и элементы пути dataset1.length.

0
Anto Jurković 9 Июн 2014 в 21:40

Вы определяете xScale как [ 0 - 100 ], но значения [ 0 - 400 ] и вне представления SVG, как установлено в

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

Попробуйте установить диапазон xScale от 0 до 400

0
ROOT 6 Мар 2020 в 15:40