Выровняйте линию сетки по оси y на гистограмме D3 v5 - PullRequest
Новая
       33

Выровняйте линию сетки по оси y на гистограмме D3 v5

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

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

image

Линия сетки не совпадает с осью y.

Код: 

var svg = d3.select("#chart");
var margin = {top: 10, bottom: 10, left: 40, right: 0};
var width = +svg.attr("width") - margin.left - margin.right;
var height = +svg.attr("height") - margin.top - margin.bottom;

var x = d3.scaleBand()
    .range([margin.left, width - margin.right])
    .padding(0.1)
    //.paddingOuter(0.2);

var y = d3.scaleLinear()
    .rangeRound([height - margin.bottom, margin.top]);

var xAxis = function(g) {
        g
            .attr("transform", "translate(0," + (height - margin.bottom) + ")")
            .call(d3.axisBottom(x).tickSizeOuter(0));
        return g;
    };

var yAxis = function(g) {
        g
            .attr("transform", "translate(" + margin.left + ", " + (margin.bottom - margin.top) + ")")
            .call(d3.axisLeft(y));
        return g;
    };


function gridlines() {
    return d3.axisLeft(y).ticks();
}

svg.append("g")
    .attr("class", "grid")
    .attr("transform", "translate(" + margin.left + "," + (margin.bottom - margin.top) + ")")
    .call(gridlines()
        .tickSize(-width)
        .tickFormat("")
    );

svg.append("g").attr("class", "x-axis");
svg.append("g").attr("class", "y-axis");

Спасибо.

...