为什么 d3 时间刻度只显示我 00:00
Why d3 time scale only shows me 00:00?
我是d3的新手,我正在尝试用它做一些数据可视化。我找到了一些有关如何在 d3 中创建时间刻度的示例,但是当我按照示例并尝试创建时间刻度时,它失败了。我很沮丧,因为我无法弄清楚哪里出了问题......示例是这样的:如何使用 d3 在 xAxis 上格式化时间.js
所以我的代码是这样的:
boxplotdata =[]
boxplotdata.push(
{"datetime":"2013-10-30 01:47",length: 500, start:100,deep1_a:130,deep1:50,deep2_a:200,deep2:60,deep3_a:280,deep3:50,deep4_a:350,deep4:60},
{"datetime":"2013-10-31 01:45",length: 600, start:200,deep1_a:230,deep1:60,deep2_a:300,deep2:60,deep3_a:380,deep3:50,deep4_a:450,deep4:60},
{"datetime":"2013-11-01 02:11",length: 550,start:150,deep1_a:180,deep1:50,deep2_a:250,deep2:60,deep3_a:350,deep3:50,deep4_a:410,deep4:60},
{"datetime":"2013-11-02 01:59",length: 500,start:160,deep1_a:190,deep1:80,deep2_a:300,deep2:60,deep3_a:370,deep3:50,deep4_a:430,deep4:60},
);
//SET MARGIN FOR THE CANVAS
var margin = {top: 30, right: 10, bottom: 10, left: 10},
width = 960 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y-%m-%d %H:%M").parse;
//SET X AND Y
var x = d3.time.scale()
.domain([0,11])
.range([50, width]);
var y = d3.time.scale()
.domain([new Date(boxplotdata[0].datetime),d3.time.day.offset(new Date(boxplotdata[boxplotdata.length-1].datetime),1)])
.rangeRound([20, height-margin.top- margin.bottom]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("top")
.tickFormat(d3.time.format("%H:%M"))
//.ticks(d3.time.minutes,15)
//.tickPadding(8);
var yAxis = d3.svg.axis()
.scale(y)
.orient('right')
.ticks(d3.time.days,1)
.tickFormat(d3.time.format('%m-%d'))
.tickSize(0)
.tickPadding(8);
var line = d3.svg.line()
.x(function(d) { return x(d.datetime); });
var w=960,h=1000;
d3.select("#chart").selectAll("svg").remove(); //Old canvas must be removed before creating a new canvas.
var svg=d3.select("#chart").append("svg")
//.attr("width",w).attr("height",h);
.attr("width",w+margin.right+margin.left).attr("height",h+margin.top+margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
boxplotdata.forEach(function(d) {
d.datetime = parseDate(d.datetime);
});
x.domain(d3.extent(boxplotdata, function(d) { return d.datetime; }));
bars = svg.selectAll("g")
.data(boxplotdata)
.enter()
.append("g");
这里有一些绘图代码...,最后:
svg.append("g")
.attr("class", "x axis")
//.attr('transform', 'translate(0, ' + (height - margin.top - margin.bottom) + ')')
.call(xAxis);
svg.append("g")
.attr('class', 'y axis')
.call(yAxis);
但是,当我尝试时,我只能得到一个图表,其中 xAxis 上的所有时间都显示为"00:00"。这里出了什么问题?希望有人可以帮助我。谢谢!
您的示例数据来自不同的日子,因此这里发生的事情是 D3 正在选取代表性值(即天数之间的边界)并为此进行刻度。由于您的日期格式仅显示小时和分钟,因此 00:00 就是您得到的全部内容。
您在这里基本上有两个选择。您可以更改日期格式以显示天数(这是 D3 的意图),也可以将刻度值显式设置为所需的任何值。对于第一个,您可以使用例如 d3.time.format("%a")
.对于第二个,请参阅文档。
嗨,
您可以使用轴上的 tickFormat 函数
var xAxis = d3.svg.axis() .scale(x) .orient("底部") .tickFormat(d3.time.format("%H"));
相关文章:
- D3.js生成有效的SVG,但不显示任何内容
- 如何使用d3在基于网格的(热图)图表上正确显示轴
- 仅当变量有值时才显示D3文本标签
- 使用D3.js和GeoJson在地图上显示States上的一些文本
- 在d3.js中显示圆弧末端的文本
- D3.js条形图未显示
- 点击浏览器的“后退”按钮显示的是JSON而不是HTML(使用Rails和d3.js)
- D3.js条形图:不显示 .text
- 单击按钮并将其下载为图像格式时,如何使用引导模式弹出窗口显示D3图表
- 在工具提示中显示D3 SVG
- 如何在d3.js中显示年时间刻度上的最小日刻度
- D3图表未在Android混合应用程序中显示
- 未显示在数据生成的d3形状顶部的套印格式
- 仪表D3.js在指针顶部显示值
- 如何在Apple Watch中显示D3.js图表
- 显示 D3.js将文本标记为两行
- 如何在网格框上显示 d3 元素
- 用柱状图行显示D3中不同的转换率
- 使用来自文件的外部Json数据来显示d3.js饼图
- 如何在Rails应用程序中显示d3.js的圆形包图