我正在尝试构建一个直方图脚本,比较一些"焦点"值的20%.
因此,对于75的焦点值,我会看到60到90之间的值.我想要预定的奇数个箱/条,中间箱/条包含焦点值(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; }
Adam Pearce.. 6
从以下文档.ticks()
:
指定的计数只是一个提示; 根据输入域,比例可能会返回更多或更少的值.
而不是乱搞.ticks()
,只需自己制作垃圾箱:
tempScale = d3.scale.linear().domain([0, bins]).range([lowerBand, upperBand]); tickArray = d3.range(bins + 1).map(tempScale);
并将该数组传递给.tickValues()和.bins().
从以下文档.ticks()
:
指定的计数只是一个提示; 根据输入域,比例可能会返回更多或更少的值.
而不是乱搞.ticks()
,只需自己制作垃圾箱:
tempScale = d3.scale.linear().domain([0, bins]).range([lowerBand, upperBand]); tickArray = d3.range(bins + 1).map(tempScale);
并将该数组传递给.tickValues()和.bins().