D3 Stacked Bars - d3.js - тот же бар разных цветов и бесплатных заказов одного цвета - PullRequest
Новая
       33

D3 Stacked Bars - d3.js - тот же бар разных цветов и бесплатных заказов одного цвета

0 голосов
/ 15 декабря 2018

Я пытаюсь создать простой составной график с барами, которые содержат 30 баров (данные предоставляются через JSON).Каждая полоса должна иметь 2 цвета, БЕЛЫЙ цвет означает ВСЕГО ЗАКАЗОВ, а РОЗОВЫЙ цвет означает БЕСПЛАТНЫЕ ЗАКАЗЫ (это всегда меньше).Они должны быть сложены.

Вот пример Js Fiddle: https://jsfiddle.net/sodevrom/odsngjxm/5/

Есть несколько проблем: 1) Анимация (последняя часть кода) не работает как онадолжен.Пожалуйста, попробуйте прокомментировать анимацию и посмотреть, как она должна выглядеть.И как-то я играл и играл с ним, но я не могу заставить анимацию выглядеть хорошо 2) Я хочу показать маленькие полосы (например, 4-5 пикселей) для 0 значений.Таким образом, даже если общий объем продаж / свободных продаж равен 0, я хочу отобразить минимальную полосу 3) Я хочу, чтобы всплывающая подсказка была одинаковой независимо от того, над какой полосой я наводил курсор.Так что в настоящее время, если я наведу курсор мыши на белую полосу, я вижу другую подсказку, чем когда я двигаюсь над розовой полосой.Я хочу, чтобы отображались те же значения, Всего заказов и Свободных заказов

Это часть анимации, которая отображает их некорректно: 

rect
        .attr('height', 0)
        .attr('y', height)
        .transition()
            .attr('height', function(d) {
                return y(d.y+d.y0);
            })
            .attr('y', function(d) {
                return y(d.y0) - y(d.y0 + d.y);
            })
            .delay(function(d, i) {
                return i * delay;
            })
            .duration(duration)
            .ease(easing);

Эта часть всплывающей подсказки вызывает проблемы ипоказывает разные данные для разных цветов: 

tip.html(function (d, i) {
            return "<div class='text-center'>" +
                    "<h6 class='no-margin'>" + d.x  + "</h6>" +
                    "<span class='text-size-small'>total orders</span>" +
                    "<div class='text-size-small'>" + d.y + "</div>" +
                    "<span class='text-size-small'>free orders</span>" +
                    "<div class='text-size-small'>" + d.y0 + "</div>" +
                "</div>";
        });

Может кто-нибудь помочь мне с этим?

Спасибо!

...