Javascript 如何解决调用d3.layout.histogram（）.bin（…）（…）时未定义的数据问题

基于使用的示例，我也创建了一个直方图。但是，调用代码段时：

// Generate a histogram using twenty uniformly-spaced bins.
var data = d3.layout.histogram()
    .bins(x.ticks(20))
    (values);
if (angular.isUndefined(data) || data.length === 0) {
    // what now???
}

如果值只有一个唯一的值（在我的用例中可能发生），则上述情况将导致未定义的数据，例如当

var值=[1,1,1,1,1,1,1.]

有没有办法确保我总是为这个边界案例获取至少一个有效的bin而不是未定义的数据

---

更新：我已准备好复制该问题。只需确保打开控制台查看错误和调用堆栈，例如IE F12或Firefox use Developer Tools中的错误和调用堆栈。

问题的根本原因是使用

x.ticks

设置垃圾箱。当您只有一个值时，这将导致

min

和

max

为相同的值，并且您在此处没有域：

var x = d3.scale.linear()
  .domain([min, max])
  .range([0, width]);

您可以通过简单的检查来防止这种情况：

var max = d3.max(values);
var min = d3.min(values);
if (max === min){
    max += 0.1;
  min -= 0.1;
}    
var x = d3.scale.linear()
      .domain([min, max])
      .range([0, width]);

运行代码：

var color=“钢蓝”；
//var值=d3.范围（1000）.映射（d3.随机.正常（20,5））；
var值=d3.range（1000.map）（函数（idx）{return1.0；}）；
//计数的格式化程序。
var formatCount=d3.format（“，.0f”）；
var margin={顶部：20，右侧：30，底部：30，左侧：30}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var max=d3.max（值）；
var min=d3.min（数值）；
如果（最大值==最小值）{
最大+=0.1；
min-=0.1；
}
var x=d3.scale.linear（）
.domain（[min，max]）
.范围（[0，宽度]）；
var data=d3.layout.histogram（）
.垃圾箱（x.ticks（20））
（价值观）；
console.log（数据）
var yMax=d3.max（数据，函数（d）{返回d.length}）；
var yMin=d3.min（数据，函数（d）{返回d.length}）；
var colorScale=d3.scale.linear（）
.domain（[yMin，yMax]）
.range（[d3.rgb（color）.brighter（），d3.rgb（color）.darder（）]）；
变量y=d3.scale.linear（）
.domain（[0，yMax]）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var bar=svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“g”）
.attr（“类”、“条”）
.attr（“transform”，函数（d）{return”translate（“+x（d.x）+”，“+y（d.y）+”）；}；
附加条（“rect”）
.attr（“x”，1）
.attr（“宽度”，（x（数据[0].dx）-x（0））-1）
.attr（“高度”，函数（d）{返回高度-y（d.y）；}）
.attr（“fill”，函数（d）{return colorScale（d.y）}）；
附加条（“文本”）
.attr（“dy”，“.75em”）
.attr（“y”，-12）
.attr（“x”，（x（数据[0].dx）-x（0））/2）
.attr（“文本锚定”、“中间”）
.text（函数（d）{return formatCount（d.y）；}）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
/*
*添加刷新方法以重新加载新数据
*/
函数刷新（值）{
//var值=d3.范围（1000）.映射（d3.随机.正常（20,5））；
var data=d3.layout.histogram（）
.垃圾箱（x.ticks（20））
（价值观）；
//使用新数据重置y域
var yMax=d3.max（数据，函数（d）{返回d.length}）；
var yMin=d3.min（数据，函数（d）{返回d.length}）；
y、 域（[0，yMax]）；
var colorScale=d3.scale.linear（）
.domain（[yMin，yMax]）
.range（[d3.rgb（color）.brighter（），d3.rgb（color）.darder（）]）；
var bar=svg.selectAll（“.bar”）.data（数据）；
//删除包含数据的对象
bar.exit（）.remove（）；
bar.transition（）
.持续时间（1000）
.attr（“transform”，函数（d）{return”translate（“+x（d.x）+”，“+y（d.y）+”）；}；
选择条（“rect”）
.transition（）
.持续时间（1000）
.attr（“高度”，函数（d）{返回高度-y（d.y）；}）
.attr（“fill”，函数（d）{return colorScale（d.y）}）；
条。选择（“文本”）
.transition（）
.持续时间（1000）
.text（函数（d）{return formatCount（d.y）；}）；
}

正文{
字体：10px无衬线；
}
.bar rect{
形状渲染：边缘清晰；
}
.bar文本{
填充：#999999；
}
.轴路径，.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}

---

问题的根本原因是使用

x.ticks

设置垃圾箱。当您只有一个值时，这将导致

min

和

max

为相同的值，并且您在此处没有域：

var x = d3.scale.linear()
  .domain([min, max])
  .range([0, width]);

您可以通过简单的检查来防止这种情况：

var max = d3.max(values);
var min = d3.min(values);
if (max === min){
    max += 0.1;
  min -= 0.1;
}    
var x = d3.scale.linear()
      .domain([min, max])
      .range([0, width]);

运行代码：

var color=“钢蓝”；
//var值=d3.范围（1000）.映射（d3.随机.正常（20,5））；
var值=d3.range（1000.map）（函数（idx）{return1.0；}）；
//计数的格式化程序。
var formatCount=d3.format（“，.0f”）；
var margin={顶部：20，右侧：30，底部：30，左侧：30}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var max=d3.max（值）；
var min=d3.min（数值）；
如果（最大值==最小值）{
最大+=0.1；
min-=0.1；
}
var x=d3.scale.linear（）
.domain（[min，max]）
.范围（[0，宽度]）；
var data=d3.layout.histogram（）
.垃圾箱（x.ticks（20））
（价值观）；
console.log（数据）
var yMax=d3.max（数据，函数（d）{返回d.length}）；
var yMin=d3.min（数据，函数（d）{返回d.length}）；
var colorScale=d3.scale.linear（）
.domain（[yMin，yMax]）
.range（[d3.rgb（color）.brighter（），d3.rgb（color）.darder（）]）；
变量y=d3.scale.linear（）
.domain（[0，yMax]）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var bar=svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“g”）
.attr（“类”、“条”）
.attr（“transform”，函数（d）{return”translate（“+x