I have a d3 column chart in my angular 6 app and I want to draw lines in y-axis for each label in the y-axis. I want the lines to be like this:
I don't know how to draw those light gray lines!
here is my codes from d3:
createChart() {
const element = this.chartContainer.nativeElement;
this.width = element.offsetWidth - this.margin.left - this.margin.right;
this.height = element.offsetHeight - this.margin.top - this.margin.bottom;
const svg = d3.select(element).append('svg')
.attr('width', element.offsetWidth)
.attr('height', element.offsetHeight);
// chart plot area
this.chart = svg.append('g')
.attr('class', 'bars')
.attr('transform', `translate(${this.margin.left}, ${this.margin.top})`);
// define X & Y domains
const xDomain = this.data.map(d => d[0]);
const yDomain = [10000, d3.max(this.data, d => d[1])];
// create scales
this.xScale = d3.scaleBand().padding(0.6).domain(xDomain).rangeRound([0, this.width]);
this.yScale = d3.scaleLinear().domain(yDomain).range([this.height, 0]);
// bar colors
this.colors = d3.scaleLinear().domain([0, this.data.length]).range(<any[]>['#00a0e9', '#00a0e9']);
// x & y axis
this.xAxis = svg.append('g')
.attr('class', 'axis axis-x')
.attr('transform', `translate(${this.margin.left}, ${this.margin.top + this.height})`)
.attr("stroke", "#777777")
.attr("stroke-width", 0.5)
.attr("fill", "none")
.call(d3.axisBottom(this.xScale));
this.yAxis = svg.append('g')
.attr('class', 'axis axis-y')
.attr('transform', `translate(${this.margin.left}, ${this.margin.top})`)
.attr("stroke", "#777777")
.attr("stroke-width", 0.5)
.attr("fill", "none")
.call(d3.axisLeft(this.yScale));
}
** Update =>
I added new configuration below y-axis, it works a little good but the thickness of the lines are not equal, and the other problem is that I have values of 120000 & 122000 as two maximum y but the chart draw line for both of them. it should draw only for 120000
this.yAxis = svg.append('g')
.attr('class', 'axis axis-y')
.attr('transform', `translate(${this.margin.left}, ${this.margin.top})`)
.attr("stroke", "#777777")
.attr("stroke-width", 0.5)
.attr("fill", "none")
.call(d3.axisLeft(this.yScale));
svg.append("g")
.attr("class", "grid")
.attr('transform', `translate(${this.margin.left}, ${this.margin.top})`)
.attr("stroke-width", 0.1)
.attr("fill", "none")
.call(d3.axisLeft(this.yScale)
.tickSize(-this.width)
.tickFormat("")
);
I have a d3 column chart in my angular 6 app and I want to draw lines in y-axis for each label in the y-axis. I want the lines to be like this:
I don't know how to draw those light gray lines!
here is my codes from d3:
createChart() {
const element = this.chartContainer.nativeElement;
this.width = element.offsetWidth - this.margin.left - this.margin.right;
this.height = element.offsetHeight - this.margin.top - this.margin.bottom;
const svg = d3.select(element).append('svg')
.attr('width', element.offsetWidth)
.attr('height', element.offsetHeight);
// chart plot area
this.chart = svg.append('g')
.attr('class', 'bars')
.attr('transform', `translate(${this.margin.left}, ${this.margin.top})`);
// define X & Y domains
const xDomain = this.data.map(d => d[0]);
const yDomain = [10000, d3.max(this.data, d => d[1])];
// create scales
this.xScale = d3.scaleBand().padding(0.6).domain(xDomain).rangeRound([0, this.width]);
this.yScale = d3.scaleLinear().domain(yDomain).range([this.height, 0]);
// bar colors
this.colors = d3.scaleLinear().domain([0, this.data.length]).range(<any[]>['#00a0e9', '#00a0e9']);
// x & y axis
this.xAxis = svg.append('g')
.attr('class', 'axis axis-x')
.attr('transform', `translate(${this.margin.left}, ${this.margin.top + this.height})`)
.attr("stroke", "#777777")
.attr("stroke-width", 0.5)
.attr("fill", "none")
.call(d3.axisBottom(this.xScale));
this.yAxis = svg.append('g')
.attr('class', 'axis axis-y')
.attr('transform', `translate(${this.margin.left}, ${this.margin.top})`)
.attr("stroke", "#777777")
.attr("stroke-width", 0.5)
.attr("fill", "none")
.call(d3.axisLeft(this.yScale));
}
** Update =>
I added new configuration below y-axis, it works a little good but the thickness of the lines are not equal, and the other problem is that I have values of 120000 & 122000 as two maximum y but the chart draw line for both of them. it should draw only for 120000
this.yAxis = svg.append('g')
.attr('class', 'axis axis-y')
.attr('transform', `translate(${this.margin.left}, ${this.margin.top})`)
.attr("stroke", "#777777")
.attr("stroke-width", 0.5)
.attr("fill", "none")
.call(d3.axisLeft(this.yScale));
svg.append("g")
.attr("class", "grid")
.attr('transform', `translate(${this.margin.left}, ${this.margin.top})`)
.attr("stroke-width", 0.1)
.attr("fill", "none")
.call(d3.axisLeft(this.yScale)
.tickSize(-this.width)
.tickFormat("")
);
Share
Improve this question
edited Sep 2, 2018 at 5:32
fariba.j
asked Sep 1, 2018 at 8:12
fariba.jfariba.j
1,8657 gold badges26 silver badges42 bronze badges
1 Answer
Reset to default 9I once found this snippet: Draw a second version of the y-axis
g.append("g")
.attr("class", "grid")
.call(d3.axisLeft(y)
.tickSize(-width)
.tickFormat("")
);
And you need a little CSS to style the lines
.grid line {stroke: lightgrey;stroke-opacity: 0.7;shape-rendering: crispEdges;}
.grid path {stroke-width: 0;}
If you only want the grid lines but not the axis you can use axis.tickSizeInner([size])