我正在尝试构建一个直方图脚本，用于比较某些“焦点”值的20％内的值。
因此，对于75的焦点值，我会看到60到90之间的值。我想要一个预定的奇数个箱/条，中间的bin / bar包含焦点值（75）。有些箱子的计数可能为零。
我的问题和问题与如何控制箱数和刻度数有关。我想要酒吧之间的蜱虫。我想说“7个箱子”，得到7个栏，有8个刻度。
有没有办法控制垃圾箱和蜱到那个水平？似乎d3有时会覆盖我。
这是一个jsfiddle，其中包含一些示例：http://jsfiddle.net/rolfsf/FCgT5/5/
不同的箱/蜱和域不会产生一致的结果：
var data = [61.5, 65.2, 72.3, 75.1, 85.0, 86.2, 61.0, 64.3, 72.1, 75.8, 79.9, 84.8, 63.1, 65.0, 77.0, 74.0, 88.0, 87.0, 60.4, 65.9, 79.5, 70.1, 80.4, 85.9, 90.0];
d3 .select('#chart')
.datum(data)
.call(histogramChart()
.width(700)
.height(250)
.lowerBand(55)
.upperBand(95)
.bins(7)
.yAxisLabel("# of Orgs")
.xAxisLabel("# of FooBars")
);
d3 .select('#chart2')
.datum(data)
.call(histogramChart()
.width(700)
.height(250)
.lowerBand(55)
.upperBand(100)
.bins(9)
.yAxisLabel("# of Orgs")
.xAxisLabel("# of FooBars")
);
d3 .select('#chart3')
.datum(data)
.call(histogramChart()
.width(700)
.height(250)
.lowerBand(60)
.upperBand(95)
.bins(7)
.yAxisLabel("# of Orgs")
.xAxisLabel("# of FooBars")
);
function histogramChart(){
var margin = {
top: 64,
right: 32,
bottom: 72,
left: 32,
labels: 32
};
//defaults
var height = 200;
var width = 500;
var lowerBand = 0;
var upperBand = 100;
var bins = 5;
var chartTitle = ["test"];
var yAxisLabel = "y axis label";
var xAxisLabel = "x axis label";
var xformat = function(d){return d};
var formatCount = d3.format(",.0f");
function chart(selection) {
var maxBarHeight = height - (margin.top + margin.bottom);
var chartWidth = width - margin.right - margin.left;
selection.selectAll('svg').remove();//remove old charts
selection.each(function(values) {
var x = d3.scale.linear()
.domain([lowerBand, upperBand])
.range([margin.labels, chartWidth]);
// Generate a histogram using XX bins.
var data = d3.layout.histogram()
.bins(x.ticks(bins))
(values);
//fill the chart width, with 1px spacing between
var numBins = data.length;
var barWidth = parseInt((chartWidth-margin.labels)/numBins) - 1;
var y = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.y; })])
.range([maxBarHeight, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(xformat);
var svgContainer = d3.select(this).append("svg")
.attr("class", "chart mini-column-chart")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var bar = svgContainer.selectAll(".bar")
.data(data)
.enter().append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
var xAxisG = svgContainer.append("g")
.attr("class", "x axis")
.attr("transform", "translate( 0," + (height - margin.top - margin.bottom) + ")")
.call(xAxis)
var header = svgContainer.append("text")
.attr("class", "chart-title")
.attr("x", width/2)
.attr("text-anchor", "middle")
.attr("dy", -32)
.text(chartTitle);
bar.append("rect")
.attr("x", 1)
.attr("width", barWidth)
.attr("height", function(d) { return maxBarHeight - y(d.y); });
bar.append("text")
.attr("class", "axis-label")
.attr("dy", "-.75em")
.attr("y", 6)
.attr("x", barWidth / 2)
.attr("text-anchor", "middle")
.text(function(d) { return formatCount(d.y); });
xAxisG.append("text")
.attr("class", "axis-label")
.attr("x", margin.left)
.attr("dy", 56)
.text(xAxisLabel);
svgContainer.append("g")
.attr("class", "y axis")
.append("text")
.attr("class", "axis-label")
.attr("transform", "rotate(-90)")
.attr("y", 8)
.attr("x", -(height-margin.top-margin.bottom))
.style("text-anchor", "start")
.text(yAxisLabel);
});
}
chart.title = function(_) {
if (!arguments.length) return chartTitle;
chartTitle = _;
return chart;
};
chart.lowerBand = function(_) {
if (!arguments.length) return lowerBand;
lowerBand = _;
return chart;
};
chart.upperBand = function(_) {
if (!arguments.length) return upperBand;
upperBand = _;
return chart;
};
chart.width = function(_) {
if (!arguments.length) return width;
width = _;
return chart;
};
chart.height = function(_) {
if (!arguments.length) return height;
height = _;
return chart;
};
chart.bins = function(_) {
if (!arguments.length) return bins;
bins = _;
return chart;
};
chart.xformat = function(_) {
if (!arguments.length) return xformat;
xformat = _;
return chart;
};
chart.yAxisLabel = function(_) {
if (!arguments.length) return yAxisLabel;
yAxisLabel = _;
return chart;
};
chart.xAxisLabel = function(_) {
if (!arguments.length) return xAxisLabel;
xAxisLabel = _;
return chart;
};
chart.focusLabel = function(_) {
if (!arguments.length) return focusLabel;
focusLabel = _;
return chart;
};
chart.focusValue = function(_) {
if (!arguments.length) return focusValue;
focusValue = _;
return chart;
};
return chart;
}
答案 0 :(得分：6)
来自.ticks()的文档：
指定的计数只是一个提示;规模可能会更多或更少 值取决于输入域。
不要乱用.ticks()，而是自己制作垃圾箱：
tempScale = d3.scale.linear().domain([0, bins]).range([lowerBand, upperBand]);
tickArray = d3.range(bins + 1).map(tempScale);
并将该数组传递给.tickValues()和.bins()。