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

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

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

введите описание изображения здесь

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

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

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

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

Всего 1 ответ


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

Ваш селектор 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})`)
  }
}

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

Диаграмма будет выглядеть странно, если вы попытаетесь создать пробел каждые 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, хотя.


Есть идеи?

10000