javascript - d3.layout.histogram() 返回错误的输出

Question

我使用此代码为使用数据集的 d3.js 进行直方图布局。但是，矩形的起始位置不是 0。根据直方图布局，起始位置应始终为 0，但不知何故我没有得到 0。如果有任何错误，请帮助我指出购买点。

谢谢。

引用教程视频 - https://youtu.be/0CZ7-f9wXiM?list=PL6il2r9i3BqH9PmbOf5wA5E1wOG3FT22p

JSFiddle - https://jsfiddle.net/tewjyfed/

create(dataset);        


function create(data) {        
    var map =  data.map(function(i) { return parseInt(i.skill) });
    var histogram = d3.layout.histogram()
                        .bins(7)
                        (map);

    var yscale = d3.scale.linear()
                    .domain([0, d3.max(histogram.map(function(i) { return i.length }))])
                    .range([0, height]);

    var xscale = d3.scale.linear()
                    .domain([0, d3.max(map)])
                    .range([0, width]);

    var axis = d3.svg.axis()
                    .scale(xscale)
                    .orient('bottom');

    var bar = svg.selectAll('bar')
                .data(histogram)
                .enter()
                .append('g');

    bar.append('rect')
        .attr('x', function(d) { return  xscale(d.x)})
        .attr('y', function(d) { return height - yscale(d.y) })
        .attr('width', function(d) { return xscale(d.dx) })
        .attr('height', function(d) { return yscale(d.y)})
        .attr('fill', 'lightsteelblue')
        .attr('stroke', 'steelblue');

        svg.append('g')
        .attr('transform', 'translate(0, '+height +')')                     
        .call(axis);
}

Answer 1

默认情况下，直方图的范围是数据的最小值/最大值，因此它从 5 开始。您可以通过调用 .histogram().range([0 , d3.max(map)]).

jsfiddle:https://jsfiddle.net/rm9tozcg/

var width = 500;
var height = 500;
var padding = 50;
var dataset = [
{"name": "a", "skill": 60},
{"name": "b", "skill": 65},
{"name": "c", "skill": 23},
{"name": "d", "skill": 47},
{"name": "e", "skill": 38},
{"name": "f", "skill": 27},
{"name": "g", "skill": 24},
{"name": "h", "skill": 16},
{"name": "i", "skill": 36},
{"name": "j", "skill": 57},
{"name": "k", "skill": 77},
{"name": "l", "skill": 5},
{"name": "m", "skill": 46},
{"name": "n", "skill": 29},
{"name": "o", "skill": 55},
{"name": "p", "skill": 68},
{"name": "q", "skill": 40},
{"name": "r", "skill": 21},
{"name": "s", "skill": 14},
{"name": "t", "skill": 5},
{"name": "u", "skill": 63},
{"name": "v", "skill": 99},
{"name": "w", "skill": 89},
{"name": "x", "skill": 77},
{"name": "y", "skill": 12},
{"name": "z", "skill": 90}
];



var svg = d3.select("body").append("svg")
        .attr("width", width + 100)
        .attr("height", height + padding)
            .append("g")
            .attr('transform', 'translate(20,0)')

    create(dataset);        


    function create(data) {        
        var map =  data.map(function(i) { return parseInt(i.skill) });
        var maxValue = d3.max(map);

        var histogram = d3.layout.histogram()
                            .range([0, maxValue])
                            .bins(7)
                            (map);

        var yscale = d3.scale.linear()
                        .domain([0, d3.max(histogram.map(function(i) { return i.length }))])
                        .range([0, height]);

        var xscale = d3.scale.linear()
                        .domain([0, maxValue])
                        .range([0, width]);

        var axis = d3.svg.axis()
                        .scale(xscale)
                        .orient('bottom');

        var bar = svg.selectAll('bar')
                    .data(histogram)
                    .enter()
                    .append('g');

        bar.append('rect')
            .attr('x', function(d) { return  xscale(d.x)})
            .attr('y', function(d) { return height - yscale(d.y) })
            .attr('width', function(d) { return xscale(d.dx) })
            .attr('height', function(d) { return yscale(d.y)})
            .attr('fill', 'lightsteelblue')
            .attr('stroke', 'steelblue');

            svg.append('g')
            .attr('transform', 'translate(0, '+height +')')                     
            .call(axis);

}