Javascript D3 V4杆向下钻取-x值为0时x轴刻度值重叠问题

这里我用一个例子来说明。在本例中，它使用“size”属性来构建向下钻取，但我使用了它的childrence.length。向下钻取相应地工作，但由于子项长度小于10，x轴刻度值显示为十进制值。为了避免x轴刻度的十进制值，我使用了以下代码：

var xAxis = d3.axisTop()
.scale(x)
.tickFormat(d3.format("d"))
.tickValues([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]);

但使用上述代码后，当出现0值时，x轴刻度值将重叠，如下面的屏幕截图所示

如何避免这一重叠问题

var-overallJson={
“名称”：“sisoc”，
“儿童”：[{
“组织id”：“4”，
“名称”：“orgname4”，
“儿童”：[]
}, {
“组织id”：“5”，
“名称”：“org5”，
“儿童”：[{
“aptcomplex_id”：“4”，
“名称”：“apt43”，
“儿童”：[{
“建筑物id”：“3”，
“名称”：“bldg3”，
“儿童”：[{
“楼层id”：“楼层07”，
“名称”：“flr_07”，
“儿童”：[]
}]
}, {
“建筑物id”：“10号楼”，
“名称”：“bld_10”，
“儿童”：[{
“楼层标识”：“5”，
“名称”：“5楼”，
“儿童”：[]
}, {
“楼层id”：“楼层0700”，
“名称”：“flr_0700”，
“儿童”：[{
“单位id”：4，
“名称”：“测试单元”，
“用户id”：48，
“用户名”：“test111\u test”，
“儿童”：[{
“设备id”：“test12”，
“名称”：“测试仪表2”，
“序列号”：“1200000023C0123C”
}, {
“设备id”：“测试仪表1”，
“名称”：“TestMeter1”，
“序列号”：“100000012C120202”
}]
}]
}, {
“楼层id”：“楼层09”，
“名称”：“flr_09”，
“儿童”：[{
“单位id”：1，
“名称”：“demouser\u unit\u 10”，
“用户id”：36，
“用户名”：“demouser”，
“儿童”：[{
“设备id”：“演示仪表vc”，
“名称”：“演示仪表”，
“序列号”：“1000000C9640011”
}]
}, {
“单位id”：3，
“名称”：“50号机组”，
“用户id”：37，
“用户名”：“stagingtest”，
“儿童”：[]
}]
}, {
“楼层id”：“测试楼层4”，
“名称”：“试验场”，
“儿童”：[]
}]
}]
}]
}, {
“组织id”：“6”，
“名称”：“org6”，
“儿童”：[]
}, {
“组织id”：“7”，
“名称”：“org7”，
“儿童”：[{
“aptcomplex_id”：“3”，
“名称”：“apt3_更新”，
“儿童”：[{
“建筑物id”：“1”，
“名称”：“bldg1_更新”，
“儿童”：[]
}]
}]
}, {
“组织id”：“8”，
“名称”：“org8_0”，
“儿童”：[{
“aptcomplex_id”：“APT_67”，
“名称”：“Amritam”，
“儿童”：[]
}]
}, {
“组织id”：“组织109”，
“名称”：“org_109”，
“儿童”：[]
}]
};
var保证金={
前30名，
右:120,，
底部：0，
左：120
},
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var x=d3.scaleLinear（）
.范围（[0，宽度]）；
var-barHeight=20；
//var color=d3.scaleOrdinal（）
//.范围（[“钢蓝”、“#ccc”]）；
var color=d3.scaleOrdinal（d3.schemeCategory 20）
var持续时间=750，
延迟=25；
var partition=d3.partition（）；
var tooltip=d3.select（“body”）.append（“div”）.attr（“class”，“tooltip”）；
var xAxis=d3.axisTop（）
.比例（x）
.格式（d3.格式（“d”））
.tick值（[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]）；
var svg=d3.选择（#barchartContainer”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
svg.append（“rect”）
.attr（“类别”、“背景”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
。打开（“单击”，向上）；
svg.append（“g”）
.attr（“类”、“x轴”）；
svg.append（“g”）
.attr（“类”、“y轴”）
.附加（“行”）
.attr（“y1”，“100%”）；
var chart\u title=svg.append（“文本”）
.attr（“x”，（宽度/2））
.attr（“y”，0-（margin.top/2））
.attr（“id”、“图表标题”）
.attr（“文本锚定”、“中间”）
.style（“字体大小”、“16px”）
.style（“页边距底部”、“50px”）
.style（“文本装饰”、“下划线”）
.文本（“组织级”）；
d3.json（“https://gist.githubusercontent.com/gallowayevan/f87b0911dcde85a5ccd3499a36e328e9/raw/a99e2ac89cff8255e3ae1f33f35ca01783c91139/readme.json，函数（错误，根）{
root=overallJson；
如果（错误）抛出错误；
根=d3.层次结构（根）
.sum（d=>d.size）
.sort（（a，b）=>b.value-a.value）；
分区（根）；
x、 域（[0，root.value，函数（d）{
console.log（d.data）
返回0；
}]).nice（）；
向下（根，0）；
图表标题文本（“组织层级”）
});
功能下降（d，i）{
如果（！d.children | | | | this.uuu transition_uuu）返回；
var end=持续时间+d.children.length*延迟；
//将当前显示的任何条标记为退出。
var exit=svg。选择全部（“.enter”）
.attr（“类”、“出口”）；
//输入节点会立即隐藏单击的工具栏，因此请将其隐藏。
退出。选择全部（“rect”）。过滤器（功能（p）{
返回p==d；
})
.样式（“填充不透明度”，1e-6）；
//为单击的数据输入新栏。
//根据上面的说明，可以立即看到输入条。
var enter=bar（d）
.attr（“转换”，堆栈（i））
.样式（“不透明”，1）；
//使文本淡入，即使条形图可见。
//以家长的身份给条形图上色；如果合适，它们将淡出给孩子们。
输入。选择（“文本”）。样式（“填充不透明度”，1e-6）；
//输入。选择（“矩形”）。样式（“填充”，颜色（真））；
输入。选择（“rect”）.attr（“填充”），函数（d，i）{
返回颜色（i）；
})
//更新x尺度域。
x、 域（[0，d3.max（d.children，function（d））{
//