Как не отобразить последнюю строку сетки в виде диаграммы 3D.js? - PullRequest
Новая
       60

Как не отобразить последнюю строку сетки в виде диаграммы 3D.js?

0 голосов
/ 05 октября 2018

У меня есть два горизонтальных столбца на странице, нарисованной с помощью D3.js.Значения первого столбца изменяются от 0 до 99 (%), значения второго столбца - от 0 до 100 (%).

Я отображал первый столбец с осью X, превышающей максимальное значение (например, длина соответствует110) с галочками и метками каждые 10–100, а также вертикальной сеткой каждые 10–100 (значение 110 исключено из визуализации).Я пытаюсь сделать то же самое для второй диаграммы, но в этом случае всегда отображаются последний тик и последняя линия сетки, соответствующая 110.На рисунке первый и второй график соответственно.

  • горизонтальный столбец со значением по оси x до 100

  • горизонтальный столбец с x-осевое значение до 110

Вот код для отображения оси и сетки для первого столбца: 

function make_x1_gridlines() {      
        return d3.axisBottom(x1)
            .ticks(10)
    }

x1.domain([0, d3.max(data, function(d) { return d.value; })+10]);
gw1.append("g")         
        .attr("class", "grid")  
        .call(make_x1_gridlines()
            .tickSize(height1)
            .tickFormat("")
            .tickSizeOuter(0)); //hide last grid line
    gw1.append("g")
            .attr("class", "axis axis--x")
            .attr("transform", "translate(0," + height1 + ")")  
            .call(d3.axisBottom(x1)
                .tickSizeOuter(0))
            .append("text")
                .attr("font-size", "1rem")
                .attr("y", 120)
                .attr("x", 440)
                .attr("dy", "-5rem")
                .attr("text-anchor", "end")
                .text("Percentage");                
    gw1.append("g")
            .attr("class", "axis axis--y")
            .style("text-anchor", "end")
            .call(d3.axisLeft(y1)
                .tickSizeOuter(0));

Код для второго столбцато же самое, но индекс 2 вместо 1.
Я думаю, что проблема заключается в диапазоне значений до 100 во втором столбце, потому что, если я изменяю значения 100 на 99, код работает и второй графикотображается правильно, но я могу найти способ не отображать последний тик и сетку.

Есть предложения?

...