dman dman - 3 months ago 48
CSS Question

D3 Chart- place space between tick values and axis path lines

In the bottom left corner, where

200
and
12:00PM
meet, the values are to close to together and looks crowded. In addition, the dot is to close the
400
in the upper left corner.

I tried
padding: 30px
in
.tick text {}
but no luck.
How can I place a space between the tick values the axis path lines?

enter image description here




.axis line {
opacity: .5;
}

.x.axis path {
opacity: 0;
}

.y.axis path {
opacity: 0;
}

.curve {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}

.graph-sheet {
display: flex;
background-color: #fafafa;
border-radius: 2px;
align-items: center;
justify-content: center;
}


.large {
width: 700px;
height: 400px;
}

.med {
width: 600px;
height: 300px;
}

.small {
width: 400px;
height: 200px;
}

.graph-title {
font-weight: 500;
text-anchor: middle;
font-size: 20px;
font-family: 'Roboto Mono',RobotoDraft,Helvetica,Arial,sans-serif;
}

.tick text {
padding: 30px;
font-size: 12px;
fill: rgba(0,0,0,.54) !important;
}





var graph = setGraphSize(attrs.graphSize);

var margin = {top: 20, right: 30, bottom: 30, left: 30},
width = graph.width - margin.left - margin.right,
height = graph.height - margin.top - margin.bottom;

var parseDate = d3.timeParse('%H:%M');

// converts strings to date times
scope.curveData.meta.forEach(function(d) {
d.timeStamp = parseDate(d.timeStamp);
d.glucoseLevel = +d.glucoseLevel;
});

var x = d3.scaleTime()

var y = d3.scaleLinear()
.range([height, 0]);

var timeStampList = scope.curveData.meta.map(function (d) { return d.timeStamp; });

// creates X axis
var xAxis = d3.axisBottom(x)
.tickValues(timeStampList)
.tickFormat(d3.timeFormat("%I:%M %p"))

var glucoseLevelList = getTicks('glucoseLevel', scope.curveData);
var yAxis = d3.axisLeft(y).tickValues(glucoseLevelList).tickSizeInner(-width);

var curve = d3.line()
.x(function(d) { return x(d.timeStamp); })
.y(function(d) { return y(d.glucoseLevel); })
.curve(d3.curveCatmullRom.alpha(0.5));

var divEl = element[0].querySelector('div');
divEl.classList.add(attrs.graphSize);

var svg = d3.select(divEl).append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');


x.domain(d3.extent(scope.curveData.meta, function(d) { return d.timeStamp; }));
y.domain(d3.extent(scope.curveData.meta, function(d) { return d.glucoseLevel; }));

// Add the scatterplot
svg.selectAll("dot")
.data(scope.curveData.meta)
.enter().append("circle")
.attr("r", 3.5)
.attr("cx", function(d) { return x(d.timeStamp); })
.attr("cy", function(d) { return y(d.glucoseLevel); });

// Add the X Axis
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);

// Add the Y Axis
svg.append('g')
.attr('class', 'y axis')
.call(yAxis)

// Add the value curve path.
svg.append('path')
.attr('class', 'curve')
.attr('d', curve(scope.curveData.meta));

var graphTitle = graphTitleGenerator(scope.curveData);
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 4))
.attr('class', 'graph-title')
.text(graphTitle);

Answer

This is D3 v4.x. Thus, you have to set the tickPadding for your y axis:

var yAxis = d3.axisLeft(y)
    .tickValues(glucoseLevelList)
    .tickSizeInner(-width)
    .tickPadding(30);