Пример линейной диаграммы взаимодействия шкалы Protovis

Question

Я следую примеру взаимодействия с масштабом @ http://mbostock.github.com/protovis/docs/invert.html, где пытаюсь нарисовать 2-рядную линейную диаграмму.

Мой файл JSON выглядит следующим образом:

var psSeriesData =
    [{"Dates":["1-10","2-10","3-10","4-10","5-10","6-10","7-10","8-10"],"ScoresForA":    
    [78.78,79.79,78.78,78.78,78.78,79.79,79.79,76.92],"ScoresForB":
    [78.78,79.79,78.78,78.78,78.78,79.79,79.79,76.92]}]

Я намереваюсь построить ось X, используя Dates и 2-х линейную диаграмму, используя ScoresForA и ScoresForB соответственно, но не могу понять, как это сделать после долгих настроек.

Мой код выглядит следующим образом:

                var data = pv.range(2).map(function(i) {
                    return pv.range(0, 10, .1).map(function(x) { 
                        return {x: psSeriesData.Dates, y: psSeriesData.ScoresForA,ScoresForB  };
                    });
                });

                /* Chart dimensions and scales. */
                var w = 400,
                h = 200,
                x = pv.Scale.linear(0, 9.9).range(0, w),
                y = pv.Scale.linear(0, 10).range(0, h),
                i = -1;

                /* The root panel. */
                var vis = new pv.Panel()
                .width(w)
                .height(h)
                .bottom(20)
                .left(20)
                .right(10)
                .top(5);

                /* Y-ticks. */
                vis.add(pv.Rule)
                .data(pv.range(100))
                .visible(function() !(this.index % 2))
                .bottom(function(d) Math.round(y(d)) - .5)
                .strokeStyle(function(d) d ? "#eee" : "#000")
                .anchor("left").add(pv.Label)
                .text(function(d) (d * 10).toFixed(0) );

                /* X-ticks. */
                vis.add(pv.Rule)
                .data(x.ticks())
                .visible(function(d) d > 0)
                .left(function(d) Math.round(x(d)) - .5)
                .strokeStyle(function(d) d ? "#eee" : "#000")
                .anchor("bottom").add(pv.Label)
                .text(function(d) d.toFixed());

                /* A panel for each data series. */
                var panel = vis.add(pv.Panel)
                .data(data);

                /* The line. */
                var line = panel.add(pv.Line)
                .data(function(d) d)
                .left(function(d) x(d.x))
                .bottom(function(d) y(d.y))
                .lineWidth(3);

                /* The mouseover dots and label. */
                line.add(pv.Dot)
                .visible(function() i >= 0)
                .data(function(d) [d[i]])
                .fillStyle(function() line.strokeStyle())
                .strokeStyle("#000")
                .size(20)
                .lineWidth(1)
                .add(pv.Dot)
                .left(10)
                .bottom(function() this.parent.index * 12 + 10)
                .anchor("right").add(pv.Label)
                .text(function(d) (d.y * 10).toFixed(5));

                /* An invisible bar to capture events (without flickering). */
                vis.add(pv.Bar)
                .fillStyle("rgba(0,0,0,.001)")
                .event("mouseout", function() {
                    i = -1;
                    return vis;
                })
                .event("mousemove", function() {
                    var mx = x.invert(vis.mouse().x);
                    i = pv.search(data[0].map(function(d) d.x), mx);
                    i = i < 0 ? (-i - 2) : i;
                    return vis;
                });



                vis.render();

Что я делаю не так?

После того, как nrabinowitz предоставил входные данные:

     var psSeriesData = {
  "Dates": ["1/10","2/10","3/10","4/10","5/10","6/10","7/10","8/10"],
  "ScoresForA": [78.78,79.79,78.78,78.78,78.78,79.79,79.79,76.92],
  "ScoresForB": [78.78,79.79,78.78,78.78,78.78,79.79,79.79,76.92]
};

                // start by iterating over the two keys for your time series data
                var data = ["ScoresForA","ScoresForB"].map(function(seriesKey) {
                    // use pv.range to walk through the indexes of the
                    // date array (basically the same as a for loop)
                    return pv.range(0, psSeriesData.Dates.length)
                    // map these indexes to an array of objects
                    .map(function(dateIndex) {
                        // now return an object with the date index
                        // and series value for that index
                        return {
                            x: dateIndex,
                            y: psSeriesData[seriesKey][dateIndex]
                        }
                    });
                });


                /* Chart dimensions and scales. */
                var w = 400,
                h = 200,
                x = pv.Scale.linear(0, 9.9).range(0, w),
                y = pv.Scale.linear(0, 10).range(0, h),
                i = -1;

                /* The root panel. */
                var vis = new pv.Panel()
                .width(w)
                .height(h)
                .bottom(20)
                .left(20)
                .right(10)
                .top(5);

                /* Y-ticks. */
                vis.add(pv.Rule)
                .data(pv.range(100))
                .visible(function() !(this.index % 2))
                .bottom(function(d) Math.round(y(d)) - .5)
                .strokeStyle(function(d) d ? "#eee" : "#000")
                .anchor("left").add(pv.Label)
                .text(function(d) (d * 10).toFixed(0) );

                /* X-ticks. */
                vis.add(pv.Rule)
                //.data(function(d) [d[i].Dates])
                .data(pv.range(0, psSeriesData.Dates.length).map(function(a) (psSeriesData[a].Dates)))
                .visible(function(d) d > 0)
                .left(function(d) Math.round(x(d)) - .5)
                .strokeStyle(function(d) d ? "#eee" : "#000")
                .anchor("bottom").add(pv.Label)
                .text(function(d) (d).toFixed());

                /* A panel for each data series. */
                var panel = vis.add(pv.Panel)
                .data(data);

                /* The line. */
                var line = panel.add(pv.Line)
                .data(function(d) d)
                .left(function(d) x(d.x))
                .bottom(function(d) y(d.y))
                .lineWidth(3);

                /* The mouseover dots and label. */
                line.add(pv.Dot)
                .visible(function() i >= 0)
                .data(function(d) [d[i]])
                .fillStyle(function() line.strokeStyle())
                .strokeStyle("#000")
                .size(20)
                .lineWidth(1)
                .add(pv.Dot)
                .left(10)
                .bottom(function() this.parent.index * 12 + 10)
                .anchor("right").add(pv.Label)
                .text(function(d) (d.y ).toFixed(5));

                /* An invisible bar to capture events (without flickering). */
                vis.add(pv.Bar)
                .fillStyle("rgba(0,0,0,.001)")
                .event("mouseout", function() {
                    i = -1;
                    return vis;
                })
                .event("mousemove", function() {
                    var mx = x.invert(vis.mouse().x);
                    i = pv.search(data[0].map(function(d) d.x), mx);
                    i = i < 0 ? (-i - 2) : i;
                    return vis;
                });



                vis.render();

Даты все еще не отображаются в виде оси X, хотя я использовал функцию картыи ссылка на массив.Кажется, есть проблема с чтением свойства «Даты».Любые советы

Ошибка: TypeError: Невозможно прочитать свойство 'Dates' из неопределенного

Answer 1

Первое, что нужно сделать при работе с такой визуализацией (и особенно при следовании примерам Protovis), - убедиться, что ваши данные находятся в нужном вам формате. Я не прошел все вашего кода здесь, но у вас есть некоторые явные проблемы с данными сразу:

• Почему ваши начальные данные в массиве? Есть ли какая-либо причина для включения в нее прямых прямых скобок (т. Е. Внешних скобок в psSeriesData = [{ ... }])? Нет никаких причин для этого, чтобы я мог видеть в коде, как вы его представили, и это только запутает вещи (например, psSeriesData.Dates не определено - вам нужно сослаться на psSeriesData[0].Dates).

• Я не совсем понимаю, что вы делаете в своем исходном коде настройки данных, но я почти уверен, что он не дает вам то, что вы хотите - это похоже на слепое сокращение вставить из примера, хотя это не относится. В примере используется pv.range для генерации поддельных данных - вам это не нужно, у вас есть реальные данные, и вы можете пройти через это.

Лучший способ начать здесь - это понять, как должны выглядеть данные. В этом примере данные создаются следующим образом:

data = pv.range(3).map(function(i) {
    return pv.range(0, 10, .1).map(function(x) {
        return {x: x, y: i + Math.sin(x) + Math.random() * .5 + 2};
    });  
});

Запустите это в консоли, и вы увидите, что полученные данные выглядят так:

[
    [
        {
            x: 0.1,
            y: 2.34
        },
        // ...
    ],
    // ...
]

Внешний массив содержит различные временные ряды; каждый временной ряд представляет собой массив объектов типа {x:0.1, y:2.34}. Если ваши данные не выглядят так, они не будут работать с примером кода.

Ваши исходные данные должны хорошо работать для этого, но вам нужно будет привести их в правильный формат. Одной из проблем здесь является список дат - это строки, а не числа, и вы не сможете использовать их в качестве данных, если не конвертируете их в Date объекты (это настоящая боль, избегайте ее, если это возможно) или сопоставьте их с числами - последнее легко здесь, потому что они в регулярной серии. (Если бы у вас были неравномерно распределенные даты, все это было бы более сложным, но давайте пока что об этом забудем.) Вы можете просто использовать index дат в качестве значений x, а затем использовать свои два ряд как значения y.

Собрав все это вместе, вы можете отформатировать ваши данные следующим образом:

// note - no enclosing array
var psSeriesData = {
  "Dates": ["1-10","2-10","3-10","4-10","5-10","6-10","7-10", "8-10"], 
  "ScoresForA": [78.78,79.79,78.78,78.78,78.78,79.79,79.79,76.92],
  "ScoresForB": [78.78,79.79,78.78,78.78,78.78,79.79,79.79,76.92]
};

// start by iterating over the two keys for your time series data
var data = ["ScoresForA","ScoresForB"].map(function(seriesKey) {
        // use pv.range to walk through the indexes of the
        // date array (basically the same as a for loop)
        return pv.range(0, psSeriesData.Dates.length)
            // map these indexes to an array of objects
            .map(function(dateIndex) {
                // now return an object with the date index 
                // and series value for that index
                return {
                    x: dateIndex,
                    y: psSeriesData[seriesKey][dateIndex]
                }
            });
});

Есть и много других способов сделать это, но главное в том, что у вас получится такой массив: [[{x:0, y:79.79}, ...], ...]. Я не смотрел на остальную часть вашего кода, но теперь, когда ваши данные в правильном формате, вы сможете заменить поддельные данные в примере реальными данными в вашем коде, и все это будет работать как ожидаемый (хотя вам потребуется изменить любые предположения в примере об ожидаемых максимальных и минимальных значениях для x и y).