admin管理员组文章数量:1336728
/
var xAxis = d3.axisBottom(x)
.ticks(15)
.tickSizeInner(25)
So the issue is that labels of the X axis overlap, Mon 31 and Novemeber.
From what I can see the space between axes for those two dates is smaller and in result the labels overlap.
Can I solve this somehow or it's a library issue?
The project where that chart is used in has dateselectors for start and end date and also a dropdown for date granularity(daily, monthly, yearly) which means that I can't use a fixed number of ticks and specific format.
.ticks(15)
is used here just for the demo, in the project it's like this
Math.min(data.length, Math.floor(width / 100)) // 100 being the 'min' tick width
https://jsfiddle/q5vwgxgz/3/
var xAxis = d3.axisBottom(x)
.ticks(15)
.tickSizeInner(25)
So the issue is that labels of the X axis overlap, Mon 31 and Novemeber.
From what I can see the space between axes for those two dates is smaller and in result the labels overlap.
Can I solve this somehow or it's a library issue?
The project where that chart is used in has dateselectors for start and end date and also a dropdown for date granularity(daily, monthly, yearly) which means that I can't use a fixed number of ticks and specific format.
.ticks(15)
is used here just for the demo, in the project it's like this
Math.min(data.length, Math.floor(width / 100)) // 100 being the 'min' tick width
Share Improve this question edited Sep 14, 2017 at 9:23 Daniel Verejan asked Sep 14, 2017 at 8:58 Daniel VerejanDaniel Verejan 911 silver badge9 bronze badges
2 Answers
Reset to default 6One solution (out of many) is specifically setting the tick format...
.tickFormat(function(d) {
return d3.timeFormat("%b %d")(d)
})
And spreading the ticks, for instance using timeDay
:
.ticks(d3.timeDay.every(4))
Here is your code with those changes:
var data = [{
"Date": "2016-09-30",
"Jobs": 0,
}, {
"Date": "2016-10-01",
"Jobs": 0,
}, {
"Date": "2016-10-02",
"Jobs": 1,
}, {
"Date": "2016-10-03",
"Jobs": 0,
}, {
"Date": "2016-10-04",
"Jobs": 3,
}, {
"Date": "2016-10-05",
"Jobs": 0,
}, {
"Date": "2016-10-06",
"Jobs": 2,
}, {
"Date": "2016-10-07",
"Jobs": 0,
}, {
"Date": "2016-10-08",
"Jobs": 0,
}, {
"Date": "2016-10-09",
"Jobs": 4,
}, {
"Date": "2016-10-10",
"Jobs": 6,
}, {
"Date": "2016-10-11",
"Jobs": 1,
}, {
"Date": "2016-10-12",
"Jobs": 2,
}, {
"Date": "2016-10-13",
"Jobs": 0,
}, {
"Date": "2016-10-14",
"Jobs": 0,
}, {
"Date": "2016-10-15",
"Jobs": 0,
}, {
"Date": "2016-10-16",
"Jobs": 3,
}, {
"Date": "2016-10-17",
"Jobs": 2,
}, {
"Date": "2016-10-18",
"Jobs": 3,
}, {
"Date": "2016-10-19",
"Jobs": 3,
}, {
"Date": "2016-10-20",
"Jobs": 1,
}, {
"Date": "2016-10-21",
"Jobs": 0,
}, {
"Date": "2016-10-22",
"Jobs": 0,
}, {
"Date": "2016-10-23",
"Jobs": 4,
}, {
"Date": "2016-10-24",
"Jobs": 2,
}, {
"Date": "2016-10-25",
"Jobs": 6,
}, {
"Date": "2016-10-26",
"Jobs": 1,
}, {
"Date": "2016-10-27",
"Jobs": 1,
}, {
"Date": "2016-10-28",
"Jobs": 0,
}, {
"Date": "2016-10-29",
"Jobs": 3,
}, {
"Date": "2016-10-30",
"Jobs": 5,
}, {
"Date": "2016-10-31",
"Jobs": 0,
}, {
"Date": "2016-11-01",
"Jobs": 3,
}, {
"Date": "2016-11-02",
"Jobs": 1,
}, {
"Date": "2016-11-03",
"Jobs": 0,
}, {
"Date": "2016-11-04",
"Jobs": 0,
}, {
"Date": "2016-11-05",
"Jobs": 1,
}, {
"Date": "2016-11-06",
"Jobs": 4,
}, {
"Date": "2016-11-07",
"Jobs": 5,
}, {
"Date": "2016-11-08",
"Jobs": 6,
}, {
"Date": "2016-11-09",
"Jobs": 2,
}, {
"Date": "2016-11-10",
"Jobs": 1,
}, {
"Date": "2016-11-11",
"Jobs": 0,
}, {
"Date": "2016-11-12",
"Jobs": 2,
}, {
"Date": "2016-11-13",
"Jobs": 2,
}, {
"Date": "2016-11-14",
"Jobs": 1,
}, {
"Date": "2016-11-15",
"Jobs": 3,
}, {
"Date": "2016-11-16",
"Jobs": 0,
}, {
"Date": "2016-11-17",
"Jobs": 1,
}, {
"Date": "2016-11-18",
"Jobs": 0,
}, {
"Date": "2016-11-19",
"Jobs": 0,
}, {
"Date": "2016-11-20",
"Jobs": 1,
}, {
"Date": "2016-11-21",
"Jobs": 2,
}, {
"Date": "2016-11-22",
"Jobs": 2,
}, {
"Date": "2016-11-23",
"Jobs": 4,
}, {
"Date": "2016-11-24",
"Jobs": 0,
}, {
"Date": "2016-11-25",
"Jobs": 0,
}]
var parseTime = d3.timeParse("%Y-%m-%d");
data.forEach(function(d) {
d.Date = parseTime(d.Date);
});
var svg = d3.select("svg"),
margin = {
top: 20,
right: 20,
bottom: 50,
left: 50
},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleTime()
.rangeRound([0, width]);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var line = d3.line()
.x(function(d) {
return x(d.Date);
})
.y(function(d) {
return y(d.Jobs);
});
x.domain(d3.extent(data, function(d) {
return d.Date;
}));
y.domain(d3.extent(data, function(d) {
return d.Jobs;
}));
var xAxis = d3.axisBottom(x)
.ticks(d3.timeDay.every(4))
.tickFormat(function(d) {
return d3.timeFormat("%b %d")(d)
})
.tickSizeInner(25)
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.select(".domain")
.remove();
g.append("g")
.call(d3.axisLeft(y))
.append("text")
.attr("fill", "#000")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Jobs");
g.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke-width", 1.5)
.attr("d", line);
<svg width="1200" height="500"></svg>
<script src="https://d3js/d3.v4.min.js"></script>
However, have in mind that in D3 time scales were not created having customizations in mind. Their behaviour is dynamic. Therefore, You'll have to fix each specific problem using ad hoc solutions.
Or you may rotate the label for ticks by 90 degrees:
d3.selectAll(".x-axis .tick text")
.attr("transform", "translate(-30, 50)rotate(-90)")
working code here
本文标签: javascriptD3 axis overlapStack Overflow
版权声明:本文标题:javascript - D3 axis overlap - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742221595a2435481.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论