NVD3 - столбчатая диаграмма с накоплением, пробел после каждого второго бара - PullRequest
Новая
       58

NVD3 - столбчатая диаграмма с накоплением, пробел после каждого второго бара

1 голос
/ 23 марта 2020

Я хотел бы вставлять 100px пробела после каждого второго столбца в моей гистограмме с накоплением http://jsfiddle.net/dvm628e3/1/

Желаемый результат равен

enter image description here

Свойство groupSpacing помогает мне сделать это для каждого столбца, но не для каждого n-го.

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

d3.selectAll(".nv-group:nth-child(2)").attr("transform", "translate(35, 0)");

Спасибо за совет / помощь

1 Ответ

3 голосов
/ 26 марта 2020

Проблемы с текущим селектором

Ваш CSS селектор близок, но не совсем прав.

.nv-group:nth-child(2) означает второй .nv-group своего родителя. В вашем JSFiddle каждый .nv-group является одним из цветных сегментов бара, и в этом случае второй .nv-group содержит голубой (средний) сегмент бара от каждого бара ( т.е. средняя полоса от JJ, BB, ...).

Вместо этого нам нужно выбрать правильный бар из каждого .nv-group. 

d3.selectAll(".nv-group rect:nth-child(2)")

Это выбирает второй бар.

Еще лучше, мы можем сделать 

d3.selectAll(".nv-group rect:nth-last-child(2)")

Это выбирает каждый второй бар.

Затем мы можем применить .width или .attr к этим выбранным объектам, но на самом деле это мало поможет.

Поскольку каждый бар располагается абсолютно относительно левой части графика, а не относительно бара перед ним, при перемещении одного бара мы создали бы странные промежутки между окружающими барами.

Возможные решения

1. Программно перемещать бары JSFiddle

Вы можете сделать это: 

for ( let i = 1; i <= d3.selectAll(".nv-group:first-child rect")[0].length; i++) {
  if (i % 2 == 0) {
    const [xPosition, yPosition] = d3.selectAll(`.nv-group rect:nth-child(${i})`).attr("transform").match(/[0-9.]+/g);
    d3.selectAll(`.nv-group rect:nth-child(${i})`).attr("transform", `translate(${xPosition - 5}, ${yPosition})`)
  }
}

Приведенный выше код работает и успешно перемещается на каждом 2-м баре.

Диаграмма будет выглядеть странно, если вы попытаетесь создать пробел каждые 3 или более столбцов, потому что интервал будет несовместимым.

2. Используйте пробел в данных JSFiddle 

var data = [
    {
        "key": "one", 
        "values": [
            {"x": "JJ", "y": 0.8},
            {"x": "BB", "y": 0.8},
            {"x": "", "y": 0},      //<-- here
            {"x": "DD", "y": 0.7},
            {"x": "FF", "y": 0.6},
            {"x": " ", "y": 0},     //<-- here
            {"x": "HH", "y": 0.5}
        ]
    },

Это добавляет невидимую полосу. Проблема в том, что это обычная толщина. Вы должны использовать решение 1, чтобы отрегулировать ширину.

3. Не используйте NVD3

"Ваниль" D3 имеет отличный пример о том, как разделить бары на группы .

Я не смог найти способ совместить это с NVD3.

...