如何解决调用 d3.layout.histogram().bins(..) 时未定义的数据问题(..).

Question

基于使用 d3.v3.min 的 d3js 的直方图示例.js我也创建了一个直方图。但是，在调用代码段时：

// 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 values = [1., 1., 1., 1., 1., 1., 1.]

有没有办法确保我始终获得至少一个有效的 bin 而不是此边界案例的未定义数据？

更新：我准备了以下重现该问题的 JSFiddle。只需确保打开控制台以查看错误和调用堆栈，例如在IE F12或Firefox中使用开发人员工具。

Answer 1

问题的根本原因是使用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 = "steelblue";
//var values = d3.range(1000).map(d3.random.normal(20, 5));
var values = d3.range(1000).map(function (idx) {return 1.0; });
// A formatter for counts.
var formatCount = d3.format(",.0f");
var margin = {top: 20, right: 30, bottom: 30, left: 30},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
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 data = d3.layout.histogram()
.bins(x.ticks(20))
(values);

console.log(data)
var yMax = d3.max(data, function(d){return d.length});
var yMin = d3.min(data, function(d){return d.length});
var colorScale = d3.scale.linear()
.domain([yMin, yMax])
.range([d3.rgb(color).brighter(), d3.rgb(color).darker()]);
var y = d3.scale.linear()
.domain([0, yMax])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var bar = svg.selectAll(".bar")
.data(data)
.enter().append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
bar.append("rect")
.attr("x", 1)
.attr("width", (x(data[0].dx) - x(0)) - 1)
.attr("height", function(d) { return height - y(d.y); })
.attr("fill", function(d) { return colorScale(d.y) });
bar.append("text")
.attr("dy", ".75em")
.attr("y", -12)
.attr("x", (x(data[0].dx) - x(0)) / 2)
.attr("text-anchor", "middle")
.text(function(d) { return formatCount(d.y); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
/*
* Adding refresh method to reload new data
*/
function refresh(values){
// var values = d3.range(1000).map(d3.random.normal(20, 5));
var data = d3.layout.histogram()
.bins(x.ticks(20))
(values);
// Reset y domain using new data
var yMax = d3.max(data, function(d){return d.length});
var yMin = d3.min(data, function(d){return d.length});
y.domain([0, yMax]);
var colorScale = d3.scale.linear()
.domain([yMin, yMax])
.range([d3.rgb(color).brighter(), d3.rgb(color).darker()]);
var bar = svg.selectAll(".bar").data(data);
// Remove object with data
bar.exit().remove();
bar.transition()
.duration(1000)
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
bar.select("rect")
.transition()
.duration(1000)
.attr("height", function(d) { return height - y(d.y); })
.attr("fill", function(d) { return colorScale(d.y) });
bar.select("text")
.transition()
.duration(1000)
.text(function(d) { return formatCount(d.y); });
}

body {
font: 10px sans-serif;
}
.bar rect {
shape-rendering: crispEdges;
}
.bar text {
fill: #999999;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>