Столбчатая диаграмма D3JS на временной шкале

Question

Столбчатая диаграмма D3JS на временной шкале

1

Мой JSON выглядит так (с некоторыми дополнительными записями, которые я не включаю для краткости)

[{"name":"Jim","category":"TechSupport","month":"8",year:"2012","Date":"2012-08-01T04:00:00.000Z", "TechSupport":2,"Management":0,"Sales":0},
{"name":"Jim","category":"Management","month":"8",year:"2012","Date":"2012-08-01T04:00:00.000Z", "TechSupport":0,"Management":3,"Sales":0}]

Мой стек выглядит так

var stack = d3.stack().keys(["TechSupport", "Management", "Sales"])
var series = stack(data)

Результаты моего стека выглядят как [[0,2],[0,0]],[[2,2],[3,3]],[[1,1],[3,3]]

Мой код для отображения барчата по шкале времени выглядит так:

var groups = mainChart.selectAll("g")
.data(series)
.append("g")

groups.selectAll("rect")
.attr("id","bar")
.attr("fill", function(d){return colors(d.data.category)})
.attr("x", function(d){return xScale(d.data.Date);}}
.attr("y", function(d){return yScale(d[1]);})
.attr("width", 20)
.attr("height" return yScale(d[0]) - yScale(d[1])})

Я могу получить все, чтобы отображать по шкале времени правильно, за исключением случаев, когда у меня есть элементы, имеющие одну и ту же дату, которые не складываются, и я не уверен, почему?

Jamie 21 сен. 2017, в 20:28

Источник

1

Можете ли вы сделать скрипку и быть более конкретным, что вы пытаетесь достичь? Я думаю, что это поможет мне понять проблему.
3TW3 21 сен. 2017, в 19:19
0

Да, вот и вы. Если вы заметили, что это не наложение, оно просто накладывается на ту же дату, где и должно складываться. jsfiddle.net/jamiebrs/pzdbddah
Jamie 22 сен. 2017, в 18:25
0

Я считаю, что что-то не так с вашими сложенными данными в «серии».
3TW3 26 сен. 2017, в 12:03
0

Не согласен с этим, но что конкретно? По сути, я пытаюсь показать, сколько раз человек работал в отделе за месяц, и если они работали более чем в одном отделе за один месяц, покажите, что данные сложены, глядя на JSON, что я могу добавить или изменить чтобы сделать эту работу?
Jamie 27 сен. 2017, в 14:48
0

Сначала вы сделали небольшую ошибку. В вашей функции forEach TechSupport должен быть заменен на Techsupport . Это решит тот факт, что в вашей серии есть Management ценности, которых не должно быть. Во-вторых, у вас есть JSON с 5 объектами на основе исходного набора данных, который должен быть 4 на основе уникальных записей даты. 2 объекта с марта 2013 года должны быть объединены в один. Тогда у вас есть хороший JSON для функции стека. Я надеюсь, что я даю вам хорошее направление.
3TW3 27 сен. 2017, в 19:47
0

Я исправил свою скрипку в foreach, чтобы решить эту проблему. Что касается 4 объектов json против 5, как мне поступить? Я довольно новичок в D3, так что я учусь по ходу дела. Я попытался сделать гнездо и использовать d. Date для своего ключа, затем используя .entries (данные), но мои бары теперь исчезли, проверьте мою скрипку, чтобы увидеть, о чем я говорю, и не стесняйтесь раскошелиться, если вам нужно сделать так, чтобы объяснить лучше.
Jamie 28 сен. 2017, в 18:12

Показать ещё 4 комментария

Теги:

javascript

d3.js

1 ответ

Ещё вопросы

Можете ли вы сделать скрипку и быть более конкретным, что вы пытаетесь достичь? Я думаю, что это поможет мне понять проблему.
Да, вот и вы. Если вы заметили, что это не наложение, оно просто накладывается на ту же дату, где и должно складываться. jsfiddle.net/jamiebrs/pzdbddah
Я считаю, что что-то не так с вашими сложенными данными в «серии».
Не согласен с этим, но что конкретно? По сути, я пытаюсь показать, сколько раз человек работал в отделе за месяц, и если они работали более чем в одном отделе за один месяц, покажите, что данные сложены, глядя на JSON, что я могу добавить или изменить чтобы сделать эту работу?
Сначала вы сделали небольшую ошибку. В вашей функции forEach TechSupport должен быть заменен на Techsupport . Это решит тот факт, что в вашей серии есть Management ценности, которых не должно быть. Во-вторых, у вас есть JSON с 5 объектами на основе исходного набора данных, который должен быть 4 на основе уникальных записей даты. 2 объекта с марта 2013 года должны быть объединены в один. Тогда у вас есть хороший JSON для функции стека. Я надеюсь, что я даю вам хорошее направление.
Я исправил свою скрипку в foreach, чтобы решить эту проблему. Что касается 4 объектов json против 5, как мне поступить? Я довольно новичок в D3, так что я учусь по ходу дела. Я попытался сделать гнездо и использовать d. Date для своего ключа, затем используя .entries (данные), но мои бары теперь исчезли, проверьте мою скрипку, чтобы увидеть, о чем я говорю, и не стесняйтесь раскошелиться, если вам нужно сделать так, чтобы объяснить лучше.

3TW3 · Accepted Answer · 2017-09-29T13-35-00.000Z

Подготовка набора данных - forEach()

В вашей функции forEach я изменил две небольшие ошибки.

Измененный Tech s upport для Tech S upport, как я упоминал ранее:

else if(d.category == 'Techsupport')

и с помощью cattotal of Management я добавил + к нему:

d.Management = +d.cattotal;

Подготовка набора данных - уменьшение()

У вас есть JSON с несколькими объектами, основанными на исходном наборе данных. Этот набор данных должен быть уменьшен на основе уникальных записей даты. Значения объекта должны быть объединены. Тогда у вас есть хороший JSON для функции стека.

Это может быть достигнуто несколькими способами. Я использую функцию reduce(), как показано ниже:

var dataset = [];
data.reduce(function(res,obj){
   var key = obj.Date;
   if (res[key]){
       res[key].Sales +=obj.Sales;
       res[key].Techsupport +=obj.Techsupport;
       res[key].Management +=obj.Management;
   } else {
       dataset.push(o);
       res[key] = obj;
   }
   return res;
}, {});

Набор данных содержит хорошо подготовленные данные для функции стека. Однако я не хотел заменять данные с помощью набора данных во всем коде, поэтому я легко обновлял данные:

data = dataset;

Разумеется, вы можете свободно выбирать.

Отзывчивая ось y:

Ось y должна автоматически адаптироваться к штабелированным барам, поэтому я изменил ваш yMax следующим образом:

var yMax = d3.max(series[series.length - 1], function(d) { return d[1]; });

Обновление чертежа штабелированных баров и всплывающих подсказок

Наконец, я обновил ваши штабелированные бары, установив атрибут fill. Я изменил его как для вашей основной, так и для навигационной диаграммы.

.attr("fill", function(d){ return colors(d3.select(this.parentNode).datum().key)})

Для всплывающих подсказок я обновил ключевые и общие значения:

div.html("Date: " +d.data.Date + "<br>" + "Category: " + d3.select(this.parentNode).datum().key + "<br>" + "Total:" + (d[1]-d[0]))

В этой скрипте вы можете найти рабочий пример.

Таким образом, при реализации этого я обнаружил ошибку, которую я не уверен, почему это происходит. Я обновил свою скрипку, взглянул на стек за январь 2012 года. Он имеет 3 элемента данных (изначально) и 3 категории, но при отображении он не отображается в стопке и дважды отображает продажи? Во-вторых, есть ли способ, использующий этот подход .reduce, чтобы определить наибольшее «сложенное» значение для моей оси Y? вот опять скрипка jsfiddle.net/jamiebrs/pzdbddah
Как вы хотите внедрить разных людей (Джеймс, Джим, ...) в график? Должны ли мы принять продажи Джима и Джеймса на свидание (сложить)?
Разные люди на самом деле не имеют отношения к делу, на странице фактически можно найти только одного человека, которого я просто положил в руки, заклинивших данные, потому что я не мог напрямую скопировать их из другой сети, если я уже сделал Джеймса Джима, чтобы не перепутать проблему. По сути, в этом графике может быть только один человек, и этот человек мог бы работать в любом из 3 отделов в месяц, и мне нужно составлять его ежемесячные итоги работы и отображать его с течением времени с помощью стека, чтобы показать подсчеты по отделам в разбивке по цветам. как мы делаем, но в общей сложности за месяц все отделы вдоль оси у
Все еще застрял на этом. Не уверен, почему стек не работает?
Я рядом Проблема заключается в подготовке набора данных. Я надеюсь выложить решение скоро :)
Да, это то, с чем я тоже сталкиваюсь.
Я разместил обновленный ответ и скрипку. Я не менял подсказки, вы должны следовать той же процедуре, что и атрибут fill.
Отлично, у меня все получилось, без всплывающей подсказки, которую я пытаюсь проследить за тем, что вы сделали с заливкой, чтобы заставить это работать. По сути, вы переместили заполнение на уровень группы, чтобы получить ключ, однако я не совсем уверен, как это сделать для категории? Когда я перемещаю функцию наведения мыши на группу и выполняю файл console.log для d для наведения мыши, все, что я получаю, это числа для стека? Как я могу получить категорию и другие данные в узле?
В конце концов, та же самая процедура не была хорошей идеей. Я переместил атрибут fill обратно в узлы и связал его с родителем. Для подсказок я сделал то же самое для ключа. Значение всплывающей подсказки также обновляется. Я считаю, что все работает так, как должно быть :)
Хорошо, теперь все имеет смысл. Урок в этом, посмотрите, сможете ли вы сгруппировать данные, прежде чем отправлять их в D3. :)