Javascript d3中条形图上的绘图元素
嗨，我正在尝试创建一个直方图，它包含一系列年份，然后绘制它们的频率。现在这是绘制图表的轴，但不是实际的条形图，我不知道为什么Javascript d3中条形图上的绘图元素,javascript,d3.js,Javascript,D3.js,嗨，我正在尝试创建一个直方图，它包含一系列年份，然后绘制它们的频率。现在这是绘制图表的轴，但不是实际的条形图，我不知道为什么 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="chart"></d
<!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>
标题
var数据1=[20002001200132012014]；
d3.选择（“#图表”）
.基准（数据1）
.call（historogramchart（）
.宽度（700）
.高度（250）
lowerBand先生（2000年）
.upperBand（2016年）
.垃圾箱（17）
.yAxisLabel（“组织名称”）
.xAxisLabel（“年度”）
);
函数histogramChart（）{
var保证金={
排名：64，
右：32，
底部：72，
左：32，
标签：32
};
//默认值
var高度=200；
var宽度=500；
var lowerBand=2000；
var上限=2017年；
var-bins=17；
var chartTitle=[“每年选定的合作伙伴组织”]；
var yAxisLabel=“y轴标签”；
var xAxisLabel=“x轴标签”；
var xformat=函数（d）{返回d}；
var formatCount=d3.format（“，.0f”）；
功能图（选择）{
var maxBarHeight=高度-（margin.top+margin.bottom）；
var chartWidth=宽度-边距.right-边距.left；
selection.selectAll（'svg'）.remove（）；//删除旧图表
选择。每个（函数（值）{
var x=d3.scaleLinear（）
.domain（[lowerBand，upperBand]）
.范围（[页边距.标签，图表宽度]）；
//使用XX个箱子生成直方图。
var data=d3.histogram（）
.阈值（x.刻度（箱））
（价值观）；
//填充图表宽度，间距为1px
var numBins=data.length；
var barWidth=parseInt（（chartWidth margin.labels）/numBins）-1；
变量y=d3.scaleLinear（）
.domain（[0，d3.max（数据，函数（d）{返回d.length；}）]）
.范围（[maxBarHeight，0]）；
var xAxis=d3.axisBottom（）
.比例（x）
.格式（xformat）；
var svgContainer=d3.select（this.append）（“svg”）
.attr（“类”、“图表”“迷你柱形图表”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var bar=svgContainer.selectAll（“rect”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{console.log（“x”+d.x1）；返回d.x1；}）
.attr（“y”，函数（d）{console.log（“lenth”+d.length）；返回d.length；}）
.attr（“宽度”，barWidth）
.attr（“height”，函数（d）{console.log（maxBarHeight-d.length）；返回maxBarHeight-d.length；}）；
/*
svg.selectAll（“rect”）
.attr（“x”，1）
.attr（“转换”，函数（d）{
返回“translate”（“+x（d.x0）+”，“+y（d.length）+”）；}
.attr（“宽度”，函数（d）{返回x（d.x1）-x（d.x0）-1；}）
.attr（“高度”，函数（d）{返回高度-y（d.length）；}）；
*/
console.log（“最大：”+maxBarHeight）；
var xAxisG=svgContainer.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”+（高度-边距.顶部-边距.底部）+”）
.呼叫（xAxis）；
var header=svgContainer.append（“文本”）
.attr（“类别”、“图表标题”）
.attr（“x”，宽度/2）
.attr（“文本锚定”、“中间”）
.attr（“dy”，-32）
.文本（标题）；
附加条（“rect”）
.attr（“x”，1）
.attr（“宽度”，barWidth）
.attr（“height”，函数（d）{return maxBarHeight-d.length；}）；
附加条（“文本”）
.attr（“类”、“轴标签”）
.attr（“dy”，“-.75em”）
.attr（“y”，6）
.attr（“x”，条宽/2）
.attr（“文本锚定”、“中间”）
.text（函数（d）{return formatCount（d.length）；}）；
xAxisG.append（“文本”）
.attr（“类”、“轴标签”）
.attr（“x”，左边距）
.attr（“dy”，56）
.文本（xAxisLabel）；
svgContainer.append（“g”）
.attr（“类”、“y轴”）
.append（“文本”）
.attr（“类”、“轴标签”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，8）
.attr（“x”，-（高度边距。上边距。下边距））
.style（“文本锚定”、“开始”）
.文本（标签）；
});
}
chart.title=函数{
如果（！arguments.length）返回图表标题；
chartTitle=u2;；
收益表；
};
chart.lowerBand=函数{
如果（！arguments.length）返回lowerBand；
lowerBand=u3;；
收益表；
};
chart.upperBand=函数（ux）{
如果（！arguments.length）返回上限；
上带=u3；
收益表；
};
chart.width=函数{
if（！arguments.length）返回宽度；
宽度=；
收益表；
};
chart.height=函数（ux）{
如果（！arguments.length）返回高度；
他
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); });