0
Hallo Ich versuche, ein Histogramm zu erstellen, das in einem Array von Jahren dauert und dann die Häufigkeiten von ihnen plottet. Im Moment zeichnet dies die Achse für das Diagramm, aber nicht die tatsächlichen Balken und ich bin mir nicht sicher warum.Zeichnungselemente in einem Balkendiagramm in d3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script>
var data1 = [2000, 2001, 2012,2013,2013,2014];
d3 .select('#chart')
.datum(data1)
.call(histogramChart()
.width(700)
.height(250)
.lowerBand(2000)
.upperBand(2016)
.bins(17)
.yAxisLabel("# of Organizations")
.xAxisLabel("Year")
);
function histogramChart(){
var margin = {
top: 64,
right: 32,
bottom: 72,
left: 32,
labels: 32
};
//defaults
var height = 200;
var width = 500;
var lowerBand = 2000;
var upperBand = 2017;
var bins = 17;
var chartTitle = ["Selected Partner Organizations Per Year"];
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.scaleLinear()
.domain([lowerBand, upperBand])
.range([margin.labels, chartWidth]);
// Generate a histogram using XX bins.
var data = d3.histogram()
.thresholds(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.scaleLinear()
.domain([0, d3.max(data, function(d) { return d.length; })])
.range([maxBarHeight, 0]);
var xAxis = d3.axisBottom()
.scale(x)
.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("rect")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { console.log("X" + d.x1);return d.x1; })
.attr("y", function(d) { console.log("lenth" + d.length);return d.length; })
.attr("width", barWidth)
.attr("height", function(d) { console.log(maxBarHeight - d.length);return maxBarHeight - d.length; });
/*
svg.selectAll("rect")
.attr("x", 1)
.attr("transform", function(d) {
return "translate(" + x(d.x0) + "," + y(d.length) + ")"; })
.attr("width", function(d) { return x(d.x1) - x(d.x0) -1 ; })
.attr("height", function(d) { return height - y(d.length); });
*/
console.log("max: " + maxBarHeight);
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 - d.length; });
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.length); });
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;
}
</script>
</body>
</html>