D3js v5 сгруппированные данные гистограммы x.domain метки и данные разделены - PullRequest
Новая
       13

D3js v5 сгруппированные данные гистограммы x.domain метки и данные разделены

0 голосов
/ 01 мая 2018

У меня есть данные в следующем формате, входящие в качестве переменной. 

var groupeddata = 
  [{ Title: "Dummy Data", ID: "46", RFU: 20291, Name: "Name1", barcolor: "#ff7f00"}, 
  {Title: "Dummy Data", ID: "50", RFU: 15000, Name: "Name2", barcolor: "#ff7f00"}, 
  {Title: "Dummy Data", ID: "40", RFU: 14000, Name: "Name3", barcolor: "#ff7f00"}, 
  {Title: "Dummy Data2", ID: "46", RFU: 21000, Name: "Name1", barcolor: "#8B008B"}, 
  {Title: "Dummy Data2", ID: "50", RFU: 18095, Name: "Name2", barcolor: "#8B008B"}, 
  {Title: "Dummy Data2", ID: "56", RFU: 27278, Name: "Name3", barcolor: "#8B008B"}];

Мне удалось создать сгруппированную гистограмму, если данные сгруппированы по идентификатору, используя функцию d3.nest, как я обсуждал в предыдущей задаче : https://bl.ocks.org/Coola85/b05339b65a7f9b082ca210d307a3e469

Однако, если есть две полосы с одинаковыми значениями свойства «Имя» и разными идентификаторами, как в приведенном выше случае, они появляются далеко. Например, Name3 показывает столбец с идентификатором 40 (строка 3 данных) и с идентификатором 56 (строка 6 данных) (https://bl.ocks.org/Coola85/86391f03bab40b16bdc24f1eedfba35f/). Кроме того, было бы хорошо, если бы метки на оси x были также простыми числами 1, 2, 3 вместо идентификационных номеров. Я не хочу, чтобы имена появлялись на метках тика оси X, поскольку имена были бы слишком длинными, чтобы поместиться в фактический набор данных.

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

Обновление 1 Чтобы уточнить, вот изображение того, что я хочу, чтобы это выглядело так: Идеальный выход. Примечание: текст и стрелки, которые пунктирные, предназначены только для ссылка и не требуется в конечном выводе.

1 Ответ

0 голосов
/ 01 мая 2018

Я думаю, что вы почти у цели - просто ваш d3.nest неверен. Ваша группировка на ID на данный момент, но с учетом ожидаемого результата, который нигде не нужен.

Измените вашу группировку на Name: 

var databyID = d3.nest()
    .key(function(d) { return d.Name; })
    .entries(groupeddata);

Это произвело следующее, что, я думаю, именно то, что вы хотите enter image description here

...