reactjs - D3 X 轴从最早的日期开始,目前从最近的整周日期开始
问题描述
我正在用 D3 制作这个以月/日为 x 轴的甘特图。目前,我的数据集中最早的日期是 9/11/2018,但 D3 显示 9/16(星期日)作为第一个标记的刻度线。我想显示的是第一个刻度是 9/11,然后是从那里到数据集中的最后一个日期的 7 天间隔(2020 年 8 月 30 日)
let x = d3
.scaleTime()
.domain([xMin, xMax])
//.nice(weeksBetween(xMin, xMax))
.range([20, weeksBetween(xMin, xMax) * 56.7])
let color = 'rgba(0, 93, 170, 0.5)'
const _this = this
svg
.append('g')
.attr('transform', 'translate(0,45)')
.attr('width', window.clientWidth)
.selectAll('.bar')
.data(data)
.enter()
.append('g')
.attr('class', 'bar')
.attr('data-project', d => {
return d.title
})
.append('rect')
.style('opacity', 1)
.attr('width', d => {
svgHeight += 49
let endDate = new Date(d.dateEnd)
let dateStart = new Date(d.dateStart)
return x(endDate) - x(dateStart)
})
.attr('x', d => {
let startDate = new Date(d.dateStart)
return x(startDate)
})
.attr('y', (d, i) => {
return i * 55
})
.attr('height', barHeight + 'rem')
.style('opacity', d => {
let opacity = 0.2
activeProject.forEach(project => {
if (project === d.name) {
opacity = 1
}
})
if (viewDownstream) {
selectedDownstreams.forEach(downstream => {
if (downstream.name === d.name) {
opacity = 0.5
}
})
}
if (viewInput) {
selectedInputs.forEach(input => {
if (input.name === d.name) {
opacity = 0.5
}
})
}
return opacity
})
.style('fill', d => {
let color = 'rgba(0, 93, 170, 0.5)'
if (viewDownstream) {
selectedDownstreams.forEach(downstream => {
if (downstream.name === d.name) {
if (downstream.conflict) {
color = Colors.functional.fRed
} else {
color = Colors.primary.prGreen4
}
}
})
}
if (viewInput) {
selectedInputs.forEach(input => {
if (input.name === d.name) {
if (input.conflict) {
color = Colors.functional.fRed
} else {
color = 'silver'
}
}
})
}
return color
})
.on('click', () => this.props.handleDisableTextBox())
//x-axis line - weeks
const ficalWeekAdjustment = week => {
if (week + 1 > 104) return week - 103
if (week + 1 > 52) return week - 51
return week + 1
}
svg
.append('g')
.data(data)
.attr('class', 'x-axis')
.attr('transform', 'translate(0,' + (svgHeight + 300) + ')')
.call(
d3
.axisBottom(x)
.ticks(weeksBetween(xMin, xMax))
// .tickFormat((d, i) => ficalWeekAdjustment(i))
.tickFormat(d3.timeFormat("%m/%d"))
)
.style('opacity', 1)
.style('opacity', 0.8)
.selectAll('text')
.style('text-anchor', 'middle')
.style('opacity', 0.5)
.style('font-size', '0.9rem')
解决方案
欢迎来到堆栈溢出。
D3 会自动调整您的刻度以使其实用,即在整数边界而不是小数上显示数字,与一周或一个月的边界对齐。如果您愿意,可以通过为刻度指定一组值来覆盖它,如下所示:
var xAxis = d3.axisBottom(x)
.tickValues([1, 2, 3, 5, 8, 13, 21]);
显然,您需要为您的刻度提供日期值。
推荐阅读
- reactjs - 动态添加表单时,下拉选择器选择应为空
- html - Integromat 匹配模式 - 查找单词 Fandoms 并提供相关字符串
- javascript - 如何在本地存储中追加购物车项目,Jquery
- r - R validate package var_group - 定义一个变量输入列表?
- android - 在反应原生android中隐藏和显示时,TouchableOpacity 在绝对视图中不起作用
- javascript - 为什么我的javascript函数在从不同文件调用时返回未定义
- c# - 如何在 .NET Core 中使用 Azure SignalR 向特定用户发送消息
- c# - 在 Visual Studio 中使用现有项目
- swift - 我要通过。通过结构从 2 vc 到第一个 vc 的文本字段数据
- leaflet - 如何在我的 Leaflet 地图中添加更改数据变量可视化的按钮?