D3.js nvd3-强制所有xaxis标签显示在折线图上
如何强制所有xAxis标签显示在图形上,而不通过.tickValue定义每个勾号 我是nvd3的新手,这是我第一次尝试。 也许有一个心地善良的人可以看看我的代码,帮我解决问题。 我做了研究,但什么都不管用 这是我的密码:D3.js nvd3-强制所有xaxis标签显示在折线图上,d3.js,nvd3.js,D3.js,Nvd3.js,如何强制所有xAxis标签显示在图形上,而不通过.tickValue定义每个勾号 我是nvd3的新手,这是我第一次尝试。 也许有一个心地善良的人可以看看我的代码,帮我解决问题。 我做了研究,但什么都不管用 这是我的密码: var data = [ { "key": "www.WebsiteA.com", "values": [ {date:"20151221",rank:1}, {date:"20151222",rank:3}, {date:"20151223",rank:2}, {da
var data = [
{
"key": "www.WebsiteA.com",
"values": [
{date:"20151221",rank:1},
{date:"20151222",rank:3},
{date:"20151223",rank:2},
{date:"20151224",rank:4},
{date:"20151225",rank:2},
{date:"20151226",rank:5},
{date:"20151227",rank:3},
{date:"20151228",rank:2},
{date:"20151229",rank:2},
{date:"20151230",rank:1},
{date:"20151231",rank:2},
{date:"20160101",rank:4},
{date:"20160102",rank:5},
{date:"20160103",rank:3},
] },
{
"key": "www.WebsiteB.com",
"values": [
{date:"20151221",rank:2},
{date:"20151222",rank:1},
{date:"20151223",rank:3},
{date:"20151224",rank:5},
{date:"20151225",rank:1},
{date:"20151226",rank:4},
{date:"20151227",rank:1},
{date:"20151228",rank:5},
{date:"20151229",rank:3},
{date:"20151230",rank:4},
{date:"20151231",rank:2},
{date:"20160101",rank:1},
{date:"20160102",rank:3},
{date:"20160103",rank:2},
] },
]
nv.addGraph(function() {
var chart = nv.models.lineChart()
.x(function(d) {return d3.time.format("%Y%m%d").parse(d.date) })
.y(function(d) {return d.rank})
.yDomain([6, 1])
.color(d3.scale.category10().range())
.useInteractiveGuideline(true)
.margin({left: 100})
.margin({right: 50})
.margin({bottom: 100})
;
chart.legend.margin({top: 10, right:60, left:80, bottom: 100});
chart.xAxis
.tickFormat(function(d) {return d3.time.format('%Y-%m-%d')(new Date(d)) })
.rotateLabels(-45)
;
chart.xScale(d3.time.scale()); //fixes misalignment of timescale with line graph
chart.yAxis
.axisLabel('Rank')
.tickFormat(d3.format('d'))
;
d3.select('#chart svg')
.datum(data)
.transition().duration(500)
.call(chart)
;
nv.utils.windowResize(chart.update);
return chart;
});
你可以在这里找到小提琴:
谢谢大家! 我认为(我以前只直接使用d3,而不是nvd3),您需要指定要使用tickValues()
显示的xvalue列表
因此,您需要做的第一件事是获取所有XValue的列表(顺序和/或重复项无关紧要):
然后使用此选项设置要显示所有xValues:
chart.xAxis
.tickFormat(function(d) {return d3.time.format('%Y-%m-%d')(new Date(d)) })
.rotateLabels(-45)
.tickValues(xValues)
.showMaxMin(false)
;
showMaxMin
needs设置为false
,因为否则必须显示所有结束值我有x的字符串值,
因此,对于tickValues(),我创建了一个基于索引的数组,其项目长度如下:
axisLabel: graph.x_label,
tickValues: Array.from({ length: graph.values.length }, (x, i) => i),
令人惊叹的!很好用!谢谢!真的很感激!
axisLabel: graph.x_label,
tickValues: Array.from({ length: graph.values.length }, (x, i) => i),