d3.js - controlling ticks and bins on a histogram

I'm trying to build a histogram script that compares values within, say, 20% of some "focus" value. So, for a focus value of 75, I'd look at values ranging from 60 to 90. I want a predetermined, odd number of bins/bars, with the middle bin/bar containing the focus value (75). Some bins may have a count of zero. My problem and question has to do with how to control the number of bins, and the number of ticks. I want the ticks between the bars. I want to say "7 bins" and get 7 bars, with 8 ticks. Is there any way to control bins and ticks to that level? It always seems like d3 will override me at times. Here's a jsfiddle with a few examples: http://jsfiddle.net/rolfsf/FCgT5/5/ Varying bins/ticks and domain doesn't give consistent results: ``` 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; } ```