-1
A
回答
0
0
我已經創建了它。不相似但更接近要求。
var datastring="Grade,Your School,Other School\nAcross Grades,10345,8345\nGrade 1,2000,1234\nGrade 2,2345,2600\nGrade 3,4230,1234\nGrade 4,1002,2456\nGrade 5,2034,234\nGrade 6,234,2678\nGrade 7,2434,3000\nGrade 8,1789,2890";
var margin = {top: 20, right: 10, bottom: 60, left: 10},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], 0.4);
var x1 = d3.scale.ordinal();
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.ordinal()
.range(["#FC654C", "#CCCCCC"]);
var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
var svg = d3.select("#svg").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 + ")");
\t
var data = d3.csv.parse(datastring);
var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "Grade"; });
data.forEach(function(d) {
d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; });
});
x0.domain(data.map(function(d) { return d.Grade; }));
x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);
\t \t \t
var grade = svg.selectAll(".grade")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) { return "translate(" + (x0(d.Grade)) + ",0)"; });
\t
\t
grade.selectAll("rect")
.data(function(d) { return d.ages; })
\t .enter().append("rect")
\t .attr("class","bars")
.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); })
.style("fill", function(d) { return color(d.name); });
grade.selectAll("text")
.data(function(d) { return d.ages; })
\t .enter().append("text")
\t .attr("class","barstext")
\t .attr("x",-410)
\t \t .attr("y",function(d,i) {return (i*x1.rangeBand())+(x1.rangeBand()/2)+5; })
\t \t .attr("transform", "rotate(-90)")
\t .text(function(d){return d.value});
\t
\t
\t grade.append("text")
\t \t \t .attr("class","barstext")
\t \t \t .attr("transform", "translate(0,"+(height+10)+")")
\t \t \t .attr("dy",1)
\t \t \t .text(function(d){return d.Grade}).call(wrap, 80); \t
\t function wrap(text, width) {
text.each(function() {
var text = d3.select(this),
words = text.text().split(/\s+/).reverse(),
word,
line = [],
lineNumber = 0,
y = text.attr("y"),
dy = parseFloat(text.attr("dy")),
lineHeight = 1.1, // ems
tspan = text.text(null).append("tspan").attr("x", function(d) { return d.children || d._children ? -10 : 10; }).attr("y", y).attr("dy", dy + "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
var textWidth = tspan.node().getComputedTextLength();
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(" "));
line = [word];
++lineNumber;
\t \t \t \t tspan.attr("x", function(d) { return d.children || d._children ? -10 : 8; }).attr("y", y).attr("dy", dy + "em");
tspan = text.append("tspan").attr("x", function(d) { return d.children || d._children ? -10 : 5; }).attr("y", 0).attr("dy", lineNumber * lineHeight + dy + "em").text(word);
}
\t \t \t else{
\t \t \t \t tspan.attr("x", function(d) { return d.children || d._children ? -10 : 0; }).attr("y", y).attr("dy", dy + "em");
\t \t \t }
}
});
}
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}
.x.axis path {
display: none;
}
.barstext{
\t font-size:18px;
\t color:#CCCCCC;
}
.tick text {
font-size:18px;
\t color:#CCCCCC;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<div id="svg" style="position:relative;width:960px;">
\t <div style="position: absolute;border-bottom: 2px solid #14B4B4;width: 100%; bottom: 61px;"></div>
</div>
相關問題
- 1. D3.js在酒吧上分組的條形圖文本
- 2. 谷歌圖表中的酒吧重疊問題 - 組合圖表
- 3. 谷歌圖表顏色個別酒吧
- 4. 谷歌圖表 - 添加「衰退酒吧」
- 5. Chart.js酒吧和折線圖
- 6. 在D3分組圖表實現上的酒吧高度問題
- 7. 與D3.js中的酒吧交互
- 8. 谷歌圖表創建除2「正常」酒吧之外的堆疊酒吧
- 9. 谷歌柱圖修剪酒吧
- 10. 在matlab中分組酒吧
- 11. D3.js酒吧沒有顯示
- 12. 不加D3.js酒吧元素動態
- 13. jQplot酒吧分組
- 14. D3分組吧
- 15. 如何在chart.js或D3中創建步進圖或階梯圖?
- 16. D3.JS動畫條形圖中的酒吧
- 17. 圖表Js可點擊的酒吧
- 18. 分組酒吧在GGPLOT2
- 19. Chart.js /谷歌圖表和JSON
- 20. 谷歌圖表腳本時間表/酒吧
- 21. 刪除高亮顯示的酒吧谷歌圖表
- 22. 爲什麼有時酒吧或酒吧的酒吧沒有邊界?
- 23. 如何使圓角酒吧谷歌圖表
- 24. 突出顯示谷歌圖表酒吧onMouseOver標題
- 25. Javascript數組或谷歌圖表view.setColumns?
- 26. 谷歌條形圖中的顏色個別酒吧
- 27. 如何把在谷歌地圖上酒吧的ios
- 28. gnuplot分組多個酒吧
- 29. 分組/堆疊酒吧GGPLOT2
- 30. D3互動H-酒吧
感謝您的答覆,但我怎麼會加入欄和文本垂直數值,如「1級」 ......上欄的頂部。 –