D3.js Boxplot显示圆而不是胡须

时间:2018-03-06 21:11:47

标签: javascript d3.js charts

我正试图在http://bl.ocks.org/jensgrubert/7789216之后得到一个带有胡须的箱形图。

由于某种原因,数据数组中的2385374显示为圆而不是胡须。

这是我的代码:

    var min = 2700000,
        max = 0;

    d3.csv([{}], function (error, csv) {
        var data = [];
        data[0] = [];
        data[0][0] = "10";

         data[0][1] = [515467, 767000, 1073453, 0, 2385374]

        var chart = d3.box()
            .whiskers(iqr(1.5))
            .height(height)
            .domain([min, max])
            .showLabels(labels);

        var svg = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .attr("class", "box")
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        // the x-axis
        var x = d3.scale.ordinal()
            .domain(data.map(function (d) { console.log(d); return d[0] }))
            .rangeRoundBands([0, width], 0.7, 0.3);

        var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom");

        // the y-axis
        var y = d3.scale.linear()
            .domain([min, max])
            .range([height + margin.top, 0 + margin.top]);

        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left");

        // draw the boxplots
        svg.selectAll(".box")
            .data(data)
            .enter().append("g")
            .attr("transform", function (d) { return "translate(" + x(d[0]) + "," + margin.top + ")"; })
            .call(chart.width(x.rangeBand()));
    });

    function iqr(k) {
        return function (d, i) {
            var q1 = d.quartiles[0],
                q3 = d.quartiles[2],
                iqr = (q3 - q1) * k,
                i = -1,
                j = d.length;
            while (d[++i] < q1 - iqr);
            while (d[--j] > q3 + iqr);
            return [i, j];
        };
    }

0 个答案:

没有答案