D3.horizon Chart не отображается

Question

Я пытаюсь сделать простую диаграмму горизонта, например this example с D3.js и Horizon.js (от почтенного Джейсона Дэвиса). Я использую некоторые данные для отслеживания работоспособности.

К сожалению, пример Майка Бостока использует странную компоновку json и делает некоторые неясные поворот/перенос строк в столбцы; что делает его очень трудным для подражания.

Мой пример JSFiddle http://jsfiddle.net/Nyquist212/bwz75t7t/ ничего не делает. Даже ошибка. Мой код и данные выглядят примерно так ...

var data=[{"key":"active time","date":"05/13/2013","value":"3860.0"},{"key":"active time","date":"05/14/2013","value":"5167.0"}, 
{"key":"active time","date":"05/15/2013","value":"5663.0"}, 
{"key":"active time","date":"05/22/2013","value":"3371.0"},{"key":"distance","date":"05/13/2013","value":"5766.0"},{"key":"distance","date":"05/14/2013","value":"7472.0"},{"key":"distance","date":"05/15/2013","value":"8264.0"},{"key":"distance","date":"05/22/2013","value":"4989.0"},{"key":"steps","date":"05/13/2013","value":"7210.0"},{"key":"steps","date":"05/14/2013","value":"9481.0"},{"key":"steps","date":"05/15/2013","value":"10431.0"},{"key":"steps","date":"05/16/2013","value":"1006.0"},{"key":"steps","date":"05/22/2013","value":"6268.0"}]; 

    data.forEach(function(d) { 
     var parseDate = d3.time.format("%m/%d/%Y").parse; 
     d.date = parseDate(d.date); 
     d.value = Math.round(+d.value); 
     }); 

var margin = {top:5, right:5, bottom:5, left:5}, 
    height = 500 - margin.top - margin.bottom, 
    width = 500 - margin.left - margin.right; 

var chart = d3.horizon() 
    .width(width) 
    .height(height) 
    .bands(1) 
    .mode("mirror") 
    .interpolate("basis"); 

var svg = d3.select("#body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    svg.data([data]).call(chart); 

Может кто-то помочь мне понять, что «форма» мне нужно массировать мой JSON в, чтобы сделать эту работу? Это даже моя проблема?

Благодаря

Answer 1

Ваш SVG не добавляется в DOM, потому что нет ни одного элемента с id="body". Строка 218 должна использовать селектор меток body вместо селектора id #body, а затем SVG будет существовать в документе.

После того, как в документе, обратите внимание, что точки данных в SVG выходят NaN:

Как вы подозреваете, что-то не так с форматом данных. Сравните ваше к структуре данных, которая использует пример:

AFAICT, пример представляет собой двумерный массив в виде [метка времени, значение] по заказу временной метки.

От метода манипулирования данными в http://bl.ocks.org/mbostock/1483226#index.html:

data = data.rate.map(function(rate, i) { 
    return [Date.UTC(data.year[i], data.month[i] - 1), rate - mean]; 
}); 

Если форматировать данные таким же образом, он должен работать. Попробуйте это:

console.log('before: ', data); 
data = data.map(function(obj, i) { 
    return [obj.date.getTime(), obj.value]; 
}).sort(function(a, b) { 
    return a[0] > b [0] ? 1 : (a[0] == b[0] ? 0 : -1); 
}); 
console.log('after: ', data); 
svg.data([data]).call(chart); 

Что-то в конце концов появляется - хотя вы можете проверить данные и убедиться, что он правильно перевел.

Примечание: Этот код выравнивает 3 данных ключевых сегментов (active time, distance и steps) в единый массив. Вероятно, вам придется разбить их на разные серии.