我怎么用D3做一个三重柱状图呢?
How can I make a triple bar chart using D3?
下面的代码工作得很好,但我想使用另一个数据集。属性本身就是数组的数据集。它们的结构是这样的:[年,人口,男人,女人]。年份将是x轴,其他三个年份将以相邻的条形显示。如何制作三柱状图?从哪里开始呢?
<script type="text/javascript">
//Width and height
var w = 500;
var h = 250;
var barPadding = 5;
//Dataset
var dataset = [10027, 10200, 10328, 10436, 10551, 10680, 10822, 10957, 11096, 11278,
11417, 11556, 11721, 11890 ];
//The other dataset
//[year, population, man, woman]
//var dataset = [[1950, 10027, 4998, 5029], [1950, 10027, 4998, 5029], [1950, 10027, 4998, 5029], etc];
//Scale
var x = d3.scale.ordinal().range([0, w])
var y = d3.scale.linear().range([h, 0]);
// Axis
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * (w / dataset.length);
})
.attr("y", function(d) {
return h - (d / 50);
})
.attr("width", w / dataset.length - barPadding)
.attr("height", function(d) {
return d / 50;
})
.attr("fill", function(d) {
return "rgb(102, 0, 51)";
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis)
.style("text-anchor", "end")
.text("Years");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.5em")
.style("text-anchor", "end")
.text("Population in millions");
</script>
(小问题:为什么我的x轴没有出现?)
Thanks in advance
关于您的小问题:您的x轴和y轴被渲染,但在svg可见空间之外。处理此问题的常见方法是在svg中添加margin
,并在页边距中添加width
和height
来渲染图表。这被D3的作者描述为常规页边距
我创建了一个片段,你称之为三重柱状图。这段代码是应用于数据集的Bostock分组柱状图。我稍微改变了一下数据集,这样每年都是一个具有population
, men
, women
和year
属性的对象。通过这种设置,可以更容易地处理这些值。
分组条形图代码背后的思想是为数据集中的每个对象添加一个group元素,并呈现该组中的条形图。因此,您将数据集绑定到年份组。在years选择中,每个元素都绑定到数据集数组中的相应对象。如果这些对你来说都不是很有意义,也许你应该阅读一下Bostock的Let's make a Bar Chart教程。他们对基本步骤给出了很好的概述。
var dataset = [{year:1950, population:10000, men:4500, women:5500}, {year:1951, population:10200, men:5000, women:6200}, {year:1952, population:11000, men:6000, women:5000}, {year:1953, population:12000, men:5900, women:6100}];
// setup conventional margin, see http://bl.ocks.org/mbostock/3019563
var margin = {top: 20, right: 30, bottom: 30, left: 60},
width = 700 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// accessor functions for the 4 values
var year = function(d) { return d.year; };
var population = function(d) { return d.population; };
var men = function(d) { return d.men; };
var women = function(d) { return d.women; };
var valueObject = function(d) { return [{name:"population", value:population(d)},{name:"men", value: men(d)}, {name: "women", value: women(d)}]; };
var color = d3.scale.ordinal()
.domain(["population","men","women"])
.range(["#31a354","#3182bd","#e6550d"]);
var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], .2)
.domain(dataset.map(year)); // use the year for the xAxis
var x1 = d3.scale.ordinal()
.domain(["population","men","women"])
.rangeRoundBands([0, x0.rangeBand()]);
var y = d3.scale.linear()
.range([height, 0])
.domain([0, d3.max(dataset.map(population))]); // use the population for calculating the maximum value
var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("body").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 axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Population");
var years = svg.selectAll(".year")
.data(dataset)
.enter()
.append("g")
.attr("class", "year")
.attr("transform", function(d) { return "translate(" + x0(year(d)) + ",0)"; });
years.selectAll("rect")
.data(valueObject)
.enter()
.append("rect")
.attr("width", x1.rangeBand())
.attr("x", function(d) { return x1(d.name); })
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
.attr("fill", function(d) { return color(d.name); });
var legend = svg.selectAll(".legend")
.data(["population","men","women"])
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
相关文章:
- Javascript平等三重等于,但是大于和小于呢?
- 打字.当使用“三重斜线”时,是否仍然需要三重斜线参考;从“进口”;
- 三.js一个物体可以同时旋转和移动吗?
- 在javascript音频中看到双重,三重声音,如何解决它
- 两个不可变的列表 - 如何使三重平等工作
- 带有杜威十进分类法的三重下拉菜单
- 三重条件做while循环
- JavaScript中的三重DES加密和PHP中的解密
- 如何修复三重下拉菜单
- 我可以使用三重等于进行JavaScript字符串比较吗
- 每隔三个用户重定向到另一个页面
- 我怎样才能使它成为一个“三脚”呢?在不重定向的情况下发出GET请求
- JavaScript双等号(==)和三重等号(===)的性能差异
- 在Javascript中循环遍历三重嵌套对象
- AJAX - jQuery -三重动态下拉菜单
- Highcharts三重下钻圆角插件Bug
- 使用“CryptoJS"在Titanium移动项目的库中解密文本消息[三重DES]
- JavaScript三重等号和三变量比较
- 清理文本字符串中字母之间的空格/三重空格
- 我怎么用D3做一个三重柱状图呢?