我正试图在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];
};
}