SVG-диаграмма - как я могу отрегулировать высоту SVG, чтобы все метки автоматически помещались внутри

Question

У меня есть x количество дат, которые я хочу показать на этом графике, поэтому, чтобы избежать наложения меток, я добавил увеличение высоты для каждой метки, однако увеличенное значение отталкивает метку от графика

http://jsfiddle.net/pjnyumsv/2

//Line 42 in the fiddle
this.outerHeight = 100;

//if i change this it just pushes the line down without adjusting the labels

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

Answer 1

В вашем коде в строке 51 у вас есть это:

this.svg = $(svg("svg"))
            .attr("width", this.outerWidth)
            .attr("class", "delete-svg2")
            .attr("height", this.outerHeight)
            .attr("backgroundColor", "#ffffff !important")
            .appendTo(this.container);
    };

Вместо объявления width и height вы можете объявить атрибут viewBox следующим образом: .attr("viewBox", 0 -50 ${this.outerWidth} ${this.outerHeight + 100}) `

Значением атрибута viewBox является список из четырех чисел x, y, ширины и высоты. Объявляя отрицательный y, вы добавите некоторое пространство над существующим окном просмотра и сможете видеть метки. В этом случае вам также потребуется увеличить компонент высоты.

Обратите внимание, что компонент y в viewBox равен -50, тогда как компонент высоты this.outerHeight + в два раза больше, т.е. 100.

В вашем коде замените вышеприведенное на:

this.svg = $(svg("svg"))

      .attr("viewBox", `0 -50 ${this.outerWidth} ${this.outerHeight + 100}` )
            .attr("class", "delete-svg2")

            .attr("backgroundColor", "#ffffff !important")
            .appendTo(this.container);
    };