d3.js - 控制直方图上的刻度和箱

Question

我正在尝试构建一个直方图脚本，用于比较某个“焦点”值的 20% 内的值。

因此，对于 75 的焦点值，我会查看范围从 60 到 90 的值。我想要一个预定的奇数个 bin/bar，中间 bin/bar 包含焦点值 (75)。某些 bin 的计数可能为零。

我的问题和问题与如何控制箱数和刻度数有关。我想要条形之间的刻度。我想说“7 个垃圾箱”并得到 7 个小节，有 8 个刻度。

有什么方法可以将 bins 和 ticks 控制到那个级别？似乎 d3 有时会覆盖我。

这是一个带有几个示例的 jsfiddle:http://jsfiddle.net/rolfsf/FCgT5/5/

不同的 bin/ticks 和 domain 不会给出一致的结果:

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;
}

Answer 1

来自 .ticks() 上的文档:

The specified count is only a hint; the scale may return more or fewer values depending on the input domain.

而不是搞乱 .ticks() ，只需自己制作垃圾箱:

tempScale = d3.scale.linear().domain([0, bins]).range([lowerBand, upperBand]);
tickArray = d3.range(bins + 1).map(tempScale);

并将该数组传递给 .tickValues()和 .bins() .