Line chart: points over ticks - d3.js

Question

I have a codepen here - https://codepen.io/anon/pen/GyeEpJ?editors=0010#0
Its a stacked bar chart with a line chart on top
The line chart points appear at the left side of the bar below.
How can I position the points in the line so they appear above the ticks in the x axis.
let dataline = d3.line()
.x((d) => {
return x(d.date);
})
.y((d) =>{
return y(d.total);
});
let layersLineArea = chart.append('g')
.attr('class', 'layers-lines');
let layersLine = layersLineArea.append('path')
.data([totalData])
.attr("class", "line")
.attr('d', dataline);

Answer 1

You're using a band scale, which is not suitable for a line chart.
The simplest solution is adding half the bandwidth in the line generator:
let dataline = d3.line()
.x((d) => {
return x(d.date) + x.bandwidth()/2;
})
.y((d) =>{
return y(d.total);
});
Here is your code with that change:
let keys = [];
let maxVal = [];
let dataToStack = [];
let totalData = [];
let legendKeys = ['usedInf', 'newInf'];
let w = 800;
let h = 450;
let margin = {
top: 60,
bottom: 40,
left: 50,
right: 20,
};
let width = w - margin.left - margin.right;
let height = h - margin.top - margin.bottom;
let colors = ['#FFC400', '#FF4436', '#FFEBB6', '#FFC400', '#B4EDA0'];
let data = [{
"one": 10,
"two": 12,
"three": 18,
"four": 22,
"five": 30,
"six": 44,
"seven": 125,
"date": "2015-05-31T00:00:00"
}, {
"one": 30,
"two": 42,
"three": 38,
"four": 62,
"five": 90,
"six": 144,
"seven": 295,
"date": "2015-06-30T00:00:00"
}, {
"one": 30,
"two": 92,
"three": 18,
"four": 100,
"five": 120,
"six": 10,
"seven": 310,
"date": "2015-07-31T00:00:00"
}, ];
for (let i = 0; i < data.length; i++) {
dataToStack.push({
date: data[i]['date'].toString(),
usedInf: data[i]['one'] + data[i]['two'] + data[i]['three'],
newInf: data[i]['four'] + data[i]['five'] + data[i]['six']
});
totalData.push({
date: data[i]['date'].toString(),
total: data[i]['seven']
});
}
//------------------------- Stack ------------------------//
let stack = d3.stack()
.keys(legendKeys);
let stackedSeries = stack(dataToStack);
//------------------------- Stack ------------------------//
let x = d3.scaleBand()
.domain(dataToStack.map(function(d) {
//let date = new Date(d.date);
return d.date;
}))
.rangeRound([0, width])
.padding(0.05);
let y = d3.scaleLinear()
.domain([0, d3.max(stackedSeries, function(d) {
return d3.max(d, (d) => {
return d[1];
})
})])
.range([height, 0]);
let svg = d3.select('.chart').append('svg')
.attr('class', 'chart')
.attr('width', w)
.attr('height', h);
let chart = svg.append('g')
.classed('graph', true)
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
//------------------------- Bar Chart ------------------------//
let layersBarArea = chart.append('g')
.attr('class', 'layers-bars');
let layersBar = layersBarArea.selectAll('.layer-bar').data(stackedSeries)
.enter()
.append('g')
.attr('class', 'layer-bar')
.style('fill', (d, i) => {
return colors[i];
});
layersBar.selectAll('rect')
.data((d) => {
return d
})
.enter()
.append('rect')
.attr('height', (d, i) => {
return y(d[0]) - y(d[1]);
})
.attr('y', (d) => {
return y(d[1]);
})
.attr('x', (d, i) => {
return x(d.data.date)
})
.attr('width', x.bandwidth());
//------------------------- Bar Chart ------------------------//
//------------------------- Line Chart ------------------------//
let dataline = d3.line()
.x((d) => {
return x(d.date) + x.bandwidth() / 2;
})
.y((d) => {
return y(d.total);
});
let layersLineArea = chart.append('g')
.attr('class', 'layers-lines');
let layersLine = layersLineArea.append('path')
.data([totalData])
.attr("class", "line")
.attr('d', dataline);
//------------------------- Line Chart ------------------------//
chart.append('g')
.classed('x axis', true)
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
chart.append('g')
.classed('y axis', true)
.call(d3.axisLeft(y)
.ticks(10));
.line {
fill: none;
stroke: #00D7D2;
stroke-width: 5px;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="chart"></div>