Javascript D3.js直方图-x轴上的位置标签和每个箱子的数量
使用D3(v3)调整直方图我发现两个问题需要解决():Javascript D3.js直方图-x轴上的位置标签和每个箱子的数量,javascript,d3.js,histogram,Javascript,D3.js,Histogram,使用D3(v3)调整直方图我发现两个问题需要解决(): var faithfulData=[20,21,26,18,24,24,25,25,21,20,20,18,28,23,17,26,27,27,20,28,23,26]; var datos_unicos=Array.from(新集合(faithfulData)) var margin={顶部:4,右侧:10,底部:40,左侧:40}, 宽度=360-margin.left-margin.right, 高度=180-margin.top-
var faithfulData=[20,21,26,18,24,24,25,25,21,20,20,18,28,23,17,26,27,27,20,28,23,26];
var datos_unicos=Array.from(新集合(faithfulData))
var margin={顶部:4,右侧:10,底部:40,左侧:40},
宽度=360-margin.left-margin.right,
高度=180-margin.top-margin.bottom;
var cant_ticks=datos_unics.length;
var edad_min=Math.min.apply(Math,datos_unics)-3;
var-edad_max=Math.max.apply(Math,datos_unics)+3;
var vartickValues=[]
var-tope=(edad_max)+1;
对于(变量i=edad_min;i 返回Math.abs(u/=scale)对于问题1,如果您只想在每个箱子的中心添加一些记号,则直方图中有x
和dx
属性,指示每个箱子的位置和步长。您可以通过xtick=x+dx/2
计算x记号
对于问题2,我认为您可以在直方图上方绘制一个折线图,并将z-index
设置为2
我希望以上内容能有所帮助。对于问题1,如果您只想在每个箱子的中心添加一些记号,直方图中有x
和dx
属性,指示每个箱子的位置和步距。您可以通过xtick=x+dx/2
计算x记号
对于问题2,我认为您可以在直方图上方绘制一个折线图,并将z-index
设置为2
我希望以上内容能有所帮助。:)
<script type="text/javascript">
var faithfulData = [20,21,26,18,24,24,25,25,21,20,20,18,28,23,17,26,27,27,20,28,23,26,];
var datos_unicos = Array.from(new Set(faithfulData))
var margin = {top: 4, right: 10, bottom: 40, left: 40},
width = 360 - margin.left - margin.right,
height = 180 - margin.top - margin.bottom;
var cant_ticks = datos_unicos.length;
var edad_min = Math.min.apply(Math, datos_unicos) - 3;
var edad_max = Math.max.apply(Math, datos_unicos) + 3;
var vartickValues = []
var tope = (edad_max)+1;
for (var i =edad_min; i< tope; i++) {
vartickValues.push(i);
}
var x = d3.scale.linear()
.domain([edad_min, edad_max])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, .1])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.tickValues(vartickValues)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format("%"));
var line = d3.svg.line()
.x(function(d) { return x(d[0]); })
.y(function(d) { return y(d[1]); });
var histogram = d3.layout.histogram()
.frequency(false)
.bins(cant_ticks);
var svg = d3.select("#plantel_distribucion").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x plantel_axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", 34)
.style("text-anchor", "end")
.text("Edad de las jugadoras");
svg.append("g")
.attr("class", "y plantel_axis")
.call(yAxis);
var data = histogram(faithfulData),
kde = kernelDensityEstimator(epanechnikovKernel(7), x.ticks(100));
svg.selectAll(".plantel_bar")
.data(data)
.enter().insert("rect", ".axis")
.attr("class", "plantel_bar")
.attr("x", function(d) { return x(d.x) + 1; })
.attr("y", function(d) { return y(d.y); })
.attr("width", x(data[0].dx + data[0].x) - x(data[0].x) - 1)
.attr("height", function(d) { return height - y(d.y); });
svg.append("path")
.datum(kde(faithfulData))
.attr("class", "plantel_line")
.attr("d", line);
//});
function kernelDensityEstimator(kernel, x) {
return function(sample) {
return x.map(function(x) {
return [x, d3.mean(sample, function(v) { return kernel(x - v); })];
});
};
}
function epanechnikovKernel(scale) {
return function(u) {
return Math.abs(u /= scale) <= 1 ? .75 * (1 - u * u) / scale : 0;
};
}
</script>