Пример диаграммы ввода строки d3

Я очень новичок в d3 и для того, чтобы узнать, что я пытаюсь манипулировать примером строки d3.js , код ниже. Я пытаюсь изменить это, чтобы использовать данные модели, которые у меня уже есть. Эти данные передаются как объект json. Проблема в том, что я не знаю, как манипулировать данными в соответствии с тем, что ожидает d3. Большинство примеров d3 используют массивы ключевых значений. Я хочу использовать массив ключей + массив значений. Например, мои данные структурированы в следующем примере:

// my data. A name property, with array values and a value property with array values. // data is the json object returned from the server var tl = new Object; tl.date = data[0].fields.date; tl.close = data[0].fields.close; console.log(tl); 

Вот структура визуально (да, это формат времени на данный момент):

Мои данные

Теперь это отличается от вызова data.tsv, который приводит к парам ключ-значение в приведенном ниже коде.

данные с ключом

Цель состоит в том, чтобы использовать мои данные как есть, без необходимости перебирать мой массив для предварительной обработки.

Вопросов:

1) Есть ли встроенные в d3 для решения этой ситуации? Например, если ключевые значения абсолютно необходимы в python, мы могли бы использовать zip функцию для быстрого создания списка значений ключа.

2) Могу ли я использовать свои данные как есть, или его нужно превратить в пары ключ-значение?

Ниже приведен пример кода строки.

 // javascript/d3 (LINE EXAMPLE) var margin = {top: 20, right: 20, bottom: 30, left: 50}, width = 640 - margin.left - margin.right, height = 480 - margin.top - margin.bottom; var parseDate = d3.time.format("%d-%b-%y").parse; var x = d3.time.scale() .range([0, width]); var y = d3.scale.linear() .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left"); var line = d3.svg.line() .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.close); }); 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 + ")"); d3.tsv("/data.tsv", function(error, data) { data.forEach(function(d) { d.date = parseDate(d.date); d.close = +d.close; }); x.domain(d3.extent(data, function(d) { return d.date; })); y.domain(d3.extent(data, function(d) { return d.close; })); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Price ($)"); svg.append("path") .datum(data) .attr("class", "line") .attr("d", line); }); 

2 Solutions collect form web for “Пример диаграммы ввода строки d3”

Проверьте функции массива d3 , среди них – zip .

Вот прокомментированная версия исходного текста, использующая ваши данные: http://bl.ocks.org/patrickberkeley/9162034

Ядром этого является следующее:

 // 1) Zip the close value with their corresponding date/time // Results in an array of arrays: // // [[582.13, "02:30:00"], [583.98, "02:45:00"], ...] // data = d3.zip(data.close, data.date).map(function(d) { // 2) Format each close and date/time value so d3 understands what each represents. close = +d[0]; // If your data source can't be changed at all, I'd rename `date` to `time` here. date = parseTime(d[1]); // 3) Return an object for each close and date/time pair. return {close: close, date: date}; }); 

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

 var line = d3.svg.line() .x(function(d) { return x(d); }) .y(function(d, i) { return y(tl.close[i]); }); svg.selectAll("path") .data([tl.date]) .enter().append("path") .attr("d", line); 

Вы просто должны помнить, чтобы установить области шкал, которые вы используете, с правильными массивами.

  • Элементы в объекте JSON не работают, используя «json.dumps»?
  • GWT для Python App Engine
  • Django - Как включить аннотированные результаты в сериализованном QuerySet?
  • Серийный анализатор Django для одного объекта
  • Python: Bad JSON - Ключи не цитируются
  • Как вернуть сообщения об ошибках в JSON с помощью Bottle HTTPError?
  • Как извлечь определенные несколько значений в JSON с помощью python?
  • Python - dump dict как строка json
  • Декодирование java-объектов в python
  • Помощь в формате JSON
  • Идентификация Android с использованием JSON
  • Python - лучший язык программирования в мире.