在D3中如何在xScale中同时显示日期和时间
在D3中，要在xScale中同时显示日期和时间，可以使用D3的时间比例尺（time scale）和时间格式化（time formatting）功能。
首先，需要创建一个时间比例尺来映射日期和时间到x轴的位置。可以使用D3的d3.scaleTime()函数来创建时间比例尺。例如：
var xScale = d3.scaleTime()
.range([0, width]) // 设置x轴的范围
.domain([startDate, endDate]); // 设置x轴的时间范围，startDate和endDate为日期对象接下来，可以使用时间格式化函数来格式化日期和时间的显示方式。D3提供了d3.timeFormat()函数来创建时间格式化函数。例如：
var formatTime = d3.timeFormat("%Y-%m-%d %H:%M:%S"); // 设置日期和时间的格式然后，在绘制x轴时，可以使用时间格式化函数来格式化刻度的显示。例如：
var xAxis = d3.axisBottom(xScale)
.tickFormat(formatTime); // 设置刻度的格式化方式最后，将x轴添加到SVG画布上即可。例如：
svg.append("g")
.attr("class", "x-axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);这样就可以在x轴上同时显示日期和时间了。
相关·内容
如何在D3中同时显示xScale中的日期和时间？我正在努力展示这一点。正如图像显示的06 PM与此一起，我也可以有日期信息。代码- var xDomain = d3.extent(data, function(d) { });
浏览 16提问于2019-09-17得票数 0
回答已采纳
const xScale = d3 .domain(fc.extentDate().accessors([d => d.date])(data)); 为了防止在我的缩放处理程序中进行多个刻度到日期的转换，我希望始终使用number，但保持UI将这些数字显示为日期。const xScale = d3 .domain(fc.extentLinear().acces
浏览 11提问于2020-08-28得票数 0
回答已采纳
1回答
我有一个d3条形图，它使用JSON文件中的数据显示一系列条形图。默认情况下，所有数据都显示在图表上，用户可以使用d3的刷子功能放大图表的特定部分。我在这里设置了一个plunkr：1.)xAxis是一个模糊的标签，而不是仅仅显示一个月的平均时间。.tickPadding(10); return d.date;这
浏览 3提问于2016-10-12得票数 2
我想在d3中创建一个线条图，但是我想每4个月显示一次滴答，因为我需要显示我在图表中有数据的每个点的滴答。我用这个： .scale(xScale) .orient('bottom');
ant这样做是可行的，但是在我
浏览 4提问于2016-01-24得票数 1
我真的很喜欢axis.tickFormat在绘制一段时间的事情时的默认行为，只是像这样创建我的x轴：我使用画笔函数如果用户查看了一天以上的数据，则以小时和分钟为单位是很好的。诸若此类。
好消息是，轴的默认行为如下所示。糟糕的是，它显示的是AM/PM的小时数，我想将其更改为24小时制。
浏览 0提问于2013-03-27得票数 8
回答已采纳
如何在单个网格列中同时显示PXDBDate字段(如CreatedDateTime审计字段)的日期和时间？
将TimeMode属性设置为True仅显示时间，而不再显示日期。
浏览 12提问于2019-10-21得票数 1
回答已采纳
1回答
我使用下面的代码来显示一周中的一天和数据的月份值。D3按预期显示日期。"Sat 18“，但在周日，它显示的是月份。“10月19日”！ var xScale = d3.time.scale()
浏览 0提问于2014-10-06得票数 1
回答已采纳
我想使用dc.js创建一个“时间线”类型的行图。我能够在d3中生成这个图表，但不能在dc中复制。"startDate": "2016-9-21",
"endDate": "2016-9-28&
浏览 1提问于2019-01-22得票数 2
我正在学习本例中的代码： formatChange = function(x) { return formatPercent;
.datum(data) .attr("d", line);D3如何计算x轴中显示</e
浏览 3提问于2016-03-24得票数 2
回答已采纳
1回答
在缩放过程中，我将使用以下内容更新重新标度轴上的滴答：使用.scaleExtent([1, 50]蜱被限制在良好的四舍五入的值( 1，2，5的倍数和10的幂)，并且刻度的域并不总是在精确的计数间隔中被细分。有关更多细节，请参见d3。我知道我可能无法得到我所请求的ticks的数量，但这违背了直觉：
然后返回的ti
浏览 3提问于2021-01-27得票数 1
回答已采纳
1回答
这是我的代码中没有伸缩的一部分，它工作得很好： .data(dataset)const xScale = d3.scaleLinear() .range([paddingsvg.selectAll("rect") .ente
浏览 3提问于2017-02-14得票数 2
回答已采纳
6回答
我的数据库中存储了日期和时间，我不想同时显示日期和时间，只显示日期本身。当我将日期/时间存储在变量中时，如何在C#中仅输出日期？
浏览 0提问于2010-12-05得票数 9
回答已采纳
1回答
我想把一天的时间一分为二。width = 800;
.domain(dayInQuarters)
我想要的是能够将滴答控制在800 to的宽度内。
工作示例：
浏览 2提问于2021-03-22得票数 1
回答已采纳
1回答
在用D3.js创建我的第一个条形图时，Freshboy遇到了几个问题：
var data = [4,8,15,16,23,42];
const svg = d3.select(&
浏览 4提问于2021-07-06得票数 0
回答已采纳
在d3js中的一个简单的时间线上，我像这样生成我的xAxis。xScale = d3.scaleLinear() .range([leftPad, width - rightPad]);
xAxis.scale(xScale);
我的域表示自时间线开始以来的秒数，但是我想以:格式显示我的滴答。final_seconds)
浏览 2提问于2016-08-18得票数 1
回答已采纳
1回答
我在D3js中绘制了一个热图，其中x轴上有一年中的一天(整数在1.365之间)，y轴上有一天的时间(整数在1..24之间)。一年中每小时都有一个点用颜色来表示温度。
我想这是有意义的，因为x轴是基于<em
浏览 1提问于2015-04-23得票数 2
回答已采纳
使用d3.js，图形的x坐标显示在x=0或y轴上。X轴表示日期和时间，y轴表示温度。但这只出现在ipad或iphone上。在我自己的机器Linux上，它正确地显示。图和所有文件都可以在，上看到
虽然正确的图形是，这是javascript， .domain) /
浏览 5提问于2016-12-15得票数 2
回答已采纳
使用D3 (v4，升级到v5也是一个选项)，我正在绘制一个时间间隔的时间序列。数据有未知的持续时间，通常是几秒，我们有一个开始日期标记和一个结束日期标记。我目前为生成x轴所做的工作如下所示，其中startTime和endTime是数字时间戳，width和height是数字，xAxisGroupSelection是D3选择：
const xScale =问题是，由于它读取了0
浏览 0提问于2018-05-30得票数 0
1回答
我是js和d3的新手，我正在尝试使用带有时间序列的数据集，但它不起作用。当我自己在pandas中构建这个数据集时，我用json编码，有没有date_format='iso'，这意味着我可以使用"2019-01-02T00:00:00.000Z"或1546387200000来回答这个问题返回正确的日期，但当我使用： const xScale = d3.scaleTime().domain([
d3.timeYear.floor(mi
浏览 30提问于2020-04-10得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
