Javascript 直方图绘制箱中的极值

我试图在柱状图中绘制值，但有些情况下，我无法处理极值，例如，像1,2,25,35,23,60这样的值被正确绘制，但是像1,23,45,60,1000,45000这样的值太远了，以至于xScale将域作为（1450），然后绘制的值非常远。有没有办法把最后的元素组合在一起？由于我使用的是相同的xScale域，因此也会以类似的方式为该直方图生成容器，如下所述

  histogram = d3
            .histogram()
            .value((d) => d.value)
            .domain(xScale.domain())
            .thresholds(xScale.ticks(threshold));

  bins = histogram(data)

---

基本上，我在这里想的是，我需要调整xScale的域（如果我是对的话）以获得正确的容器。我想得到>100的值，然后结合最后两个值1000和4500，然后在同一条上绘制，考虑到上述场景。

类似这样的情况如何：

//设置法线图
var保证金={
前20名，
右:20,，
底数：30，
左:50,，
},
宽度=600-边距。左侧-边距。右侧，
高度=300-margin.top-margin.bottom；
//我们的垃圾箱大小为10段
//最大值为100
//任何超过100的都将合并在一起
var binSize=10，
binLimit=100；
//一些假数据，100分<100分
//10分，可能大于100分
var数据=d3
.射程（100）
.map（（）=>{
返回{value:Math.random（）*binLimit}；
})
康卡特先生(
d3.范围（10）.映射（（）=>{
返回{value:Math.random（）*5000}；
})
);
//数据集中的最大值
var maxValue=d3.max（数据，（d）=>{
返回d值；
});
//设置直方图的参数
var直方图=d3
.直方图（）
.值（（d）=>{
返回d值；
})
.domain（[0，maxValue]）
//阈值应该是[0,10,20,30,40,50,60,70,80,90,100]
//因此，任何大于100的内容都将在最后装箱
.阈值（d3.范围（0110,10））；
var bins=直方图（数据）；
var x=d3.scaleLinear（）
.范围（[0，宽度]）
//将我们的比例设置为在末尾有两个额外增量的域
.domain（[0，binLimit+（binSize*2）]）；
//设置svg对象
var svg=d3
.select（'svg'）
.attr（'width'，width+margin.left+margin.right）
.attr（'height'，height+margin.top+margin.bottom）
.append（'g'）
.attr（'transform'，'translate（'+margin.left+'，'+margin.top+'））；
//添加x轴
svg
.append（'g'）
.attr（'transform'，'translate（0'，+height+'））
.attr（'class'，'x轴'）
.call（d3.axisBottom（x））；
//y轴
变量y=d3.scaleLinear（）.range（[height，0]）；
y、 领域([
0,
d3.最大值（箱、功能（d）{
返回d.length；
}),
]);
append（'g'）.call（d3.axisLeft（y））；
var bWidth=x（料仓[0].x1）-x（料仓[0].x0]-1
//附加我们的矩形
svg
.selectAll（'rect'）
.数据（箱）
.输入（）
.append（'rect'）
.attr（'x'，1）
.attr（'transform'，函数（d）{
如果（d.x1>100）{
//如果这是最后一个垃圾箱
//把它放在我们的专栏末尾
返回“translate”（'+x（binLimit+binSize）+'、'+y（d.length）+'）；
}否则{
返回“translate”（'+x（d.x0）+'，'+y（d.length）+'）；
}
})
.attr（'width'，bWidth）
.attr（高度），功能（d）{
返回高度-y（d.长度）；
})
.style（'fill'，'#69b3a2'）；
//修改最后两个标签
document.querySelector（'.x轴.勾选：第n个最后一个子项（2）'））
.children[1].innerHTML='>100'；
document.querySelector（'.x轴.勾选：第n个最后一个子项（1）'））
.children[1].innerHTML='这样的东西怎么样：



//设置法线图
var保证金={
前20名，
右:20,，
底数：30，
左:50,，
},
宽度=600-边距。左侧-边距。右侧，
高度=300-margin.top-margin.bottom；
//我们的垃圾箱大小为10段
//最大值为100
//任何超过100的都将合并在一起
var binSize=10，
binLimit=100；
//一些假数据，100分<100分
//10分，可能大于100分
var数据=d3
.射程（100）
.map（（）=>{
返回{value:Math.random（）*binLimit}；
})
康卡特先生(
d3.范围（10）.映射（（）=>{
返回{value:Math.random（）*5000}；
})
);
//数据集中的最大值
var maxValue=d3.max（数据，（d）=>{
返回d值；
});
//设置直方图的参数
var直方图=d3
.直方图（）
.值（（d）=>{
返回d值；
})
.domain（[0，maxValue]）
//阈值应该是[0,10,20,30,40,50,60,70,80,90,100]
//因此，任何大于100的内容都将在最后装箱
.阈值（d3.范围（0110,10））；
var bins=直方图（数据）；
var x=d3.scaleLinear（）
.范围（[0，宽度]）
//将我们的比例设置为在末尾有两个额外增量的域
.domain（[0，binLimit+（binSize*2）]）；
//设置svg对象
var svg=d3
.select（'svg'）
.attr（'width'，width+margin.left+margin.right）
.attr（'height'，height+margin.top+margin.bottom）
.append（'g'）
.attr（'transform'，'translate（'+margin.left+'，'+margin.top+'））；
//添加x轴
svg
.append（'g'）
.attr（'transform'，'translate（0'，+height+'））
.attr（'class'，'x轴'）
.call（d3.axisBottom（x））；
//y轴
变量y=d3.scaleLinear（）.range（[height，0