先記錄一下
<html>
? <head>
? ? <meta charset="utf-8" />
? ? <title>堆棧圖</title>
? ? <style>
? ? ? .axis path,
? ? ? .axis line {
? ? ? ? fill: none;
? ? ? ? stroke: black;
? ? ? ? shape-rendering: crispEdges;
? ? ? }
? ? ? .axis text {
? ? ? ? font-family: sans-serif;
? ? ? ? font-size: 11px;
? ? ? }
? ? </style>
? </head>
? <body>
? ? <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
? ? <script>
? ? ? var width = 700; //SVG繪制區(qū)域的寬度
? ? ? var height = 500; //SVG繪制區(qū)域的高度
? ? ? var svg = d3
? ? ? ? .select("body") //選擇<body>
? ? ? ? .append("svg") //在<body>中添加<svg>
? ? ? ? .attr("width", width) //設(shè)定<svg>的寬度屬性
? ? ? ? .attr("height", height); //設(shè)定<svg>的高度屬性
? ? ? //1. 確定初始數(shù)據(jù)
? ? ? var dataset = [
? ? ? ? {
? ? ? ? ? name: "PC",
? ? ? ? ? sales: [
? ? ? ? ? ? { year: 2005, profit: 3000 },
? ? ? ? ? ? { year: 2006, profit: 1300 },
? ? ? ? ? ? { year: 2007, profit: 3700 },
? ? ? ? ? ? { year: 2008, profit: 4900 },
? ? ? ? ? ? { year: 2009, profit: 700 }
? ? ? ? ? ]
? ? ? ? },
? ? ? ? {
? ? ? ? ? name: "SmartPhone",
? ? ? ? ? sales: [
? ? ? ? ? ? { year: 2005, profit: 2000 },
? ? ? ? ? ? { year: 2006, profit: 4000 },
? ? ? ? ? ? { year: 2007, profit: 1810 },
? ? ? ? ? ? { year: 2008, profit: 6540 },
? ? ? ? ? ? { year: 2009, profit: 2820 }
? ? ? ? ? ]
? ? ? ? },
? ? ? ? {
? ? ? ? ? name: "Software",
? ? ? ? ? sales: [
? ? ? ? ? ? { year: 2005, profit: 1100 },
? ? ? ? ? ? { year: 2006, profit: 1700 },
? ? ? ? ? ? { year: 2007, profit: 1680 },
? ? ? ? ? ? { year: 2008, profit: 4000 },
? ? ? ? ? ? { year: 2009, profit: 4900 }
? ? ? ? ? ]
? ? ? ? }
? ? ? ];
? ? ? //2. 轉(zhuǎn)換數(shù)據(jù)
? ? ? var stack = d3.layout
? ? ? ? .stack()
? ? ? ? .values(function(d) {
? ? ? ? ? return d.sales;
? ? ? ? })
? ? ? ? .x(function(d) {
? ? ? ? ? return d.year;
? ? ? ? })
? ? ? ? .y(function(d) {
? ? ? ? ? return d.profit;
? ? ? ? });
? ? ? var data = stack(dataset);
? ? ? console.log(data);
? ? ? //3. 繪制
? ? ? //外邊框
? ? ? var padding = { left: 50, right: 100, top: 30, bottom: 30 };
? ? ? //創(chuàng)建x軸比例尺
? ? ? var xRangeWidth = width - padding.left - padding.right;
? ? ? var xScale = d3.scale
? ? ? ? .ordinal()
? ? ? ? .domain(
? ? ? ? ? data[0].sales.map(function(d) {
? ? ? ? ? ? return d.year;
? ? ? ? ? })
? ? ? ? )
? ? ? ? .rangeBands([0, xRangeWidth], 0.3);
? ? ? //創(chuàng)建y軸比例尺
? ? ? //最大利潤(rùn)（定義域的最大值）
? ? ? var maxProfit = d3.max(data[data.length - 1].sales, function(d) {
? ? ? ? return d.y0 + d.y;
? ? ? });
? ? ? //最大高度（值域的最大值）
? ? ? var yRangeWidth = height - padding.top - padding.bottom;
? ? ? var yScale = d3.scale
? ? ? ? .linear()
? ? ? ? .domain([0, maxProfit]) //定義域
? ? ? ? .range([0, yRangeWidth]); //值域
? ? ? //顏色比例尺
? ? ? var color = d3.scale.category10();
? ? ? //添加分組元素
? ? ? var groups = svg
? ? ? ? .selectAll("g")
? ? ? ? .data(data)
? ? ? ? .enter()
? ? ? ? .append("g")
? ? ? ? .style("fill", function(d, i) {
? ? ? ? ? return color(i);
? ? ? ? });
? ? ? //添加矩形
? ? ? var rects = groups
? ? ? ? .selectAll("rect")
? ? ? ? .data(function(d) {
? ? ? ? ? return d.sales;
? ? ? ? })
? ? ? ? .enter()
? ? ? ? .append("rect")
? ? ? ? .attr("x", function(d) {
? ? ? ? ? return xScale(d.year);
? ? ? ? })
? ? ? ? .attr("y", function(d) {
? ? ? ? ? return yRangeWidth - yScale(d.y0 + d.y);
? ? ? ? })
? ? ? ? .attr("width", function(d) {
? ? ? ? ? return xScale.rangeBand();
? ? ? ? })
? ? ? ? .attr("height", function(d) {
? ? ? ? ? return yScale(d.y);
? ? ? ? })
? ? ? ? .attr(
? ? ? ? ? "transform",
? ? ? ? ? "translate(" + padding.left + "," + padding.top + ")"
? ? ? ? );
? ? ? var sss = groups
? ? ? ? .selectAll("text")
? ? ? ? .data(function(d) {
? ? ? ? ? return d.sales;
? ? ? ? })
? ? ? ? .enter()
? ? ? ? .append("text")
? ? ? ? .attr("x", function(d) {
? ? ? ? ? return xScale(d.year);
? ? ? ? })
? ? ? ? //.attr("y",function(d){ return yRangeWidth - yScale( d.y0 + d.y ); })
? ? ? ? .attr("y", function(d) {
? ? ? ? ? return 390;
? ? ? ? })
? ? ? ? .text("我們是1111111111111")
? ? ? ? .attr("transform", function(d) {
? ? ? ? ? debugger;
? ? ? ? ? let bbb = padding.left * 1 + xScale.rangeBand() / 2;
? ? ? ? ? let aaa = xScale(d.year) + 8 + xScale.rangeBand() / 2;
? ? ? ? ? debugger;
? ? ? ? ? return (
? ? ? ? ? ? "rotate3D(" +
? ? ? ? ? ? aaa +
? ? ? ? ? ? " 400 1 90) translate(" +
? ? ? ? ? ? bbb +
? ? ? ? ? ? "," +
? ? ? ? ? ? padding.top +
? ? ? ? ? ? ") "
? ? ? ? ? );
? ? ? ? });
? ? ? //添加坐標(biāo)軸
? ? ? //var xAxis = d3.svg.axis()
? ? ? // .scale(xScale)
? ? ? // .orient("bottom");
? ? ? //
? ? ? //yScale.range([yRangeWidth, 0]);
? ? ? //var yAxis = d3.svg.axis()
? ? ? // .scale(yScale)
? ? ? // .orient("left");
? ? ? //svg.append("g")
? ? ? // .attr("class","axis")
? ? ? // .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) +? ")")
? ? ? // .call(xAxis);
? ? ? //svg.append("g")
? ? ? // .attr("class","axis")
? ? ? // .attr("transform","translate(" + padding.left + "," + (height - padding.bottom - yRangeWidth) +? ")")
? ? ? // .call(yAxis);
? ? ? //添加分組標(biāo)簽
? ? ? //var labHeight = 50;
? ? ? //var labRadius = 10;
? ? ? //var labelCircle = groups.append("circle")
? ? ? // .attr("cx",function(d){ return width - padding.right*0.98; })
? ? ? // .attr("cy",function(d,i){ return padding.top * 2 + labHeight * i; })
? ? ? // .attr("r",labRadius);
? ? ? //var labelText = groups.append("text")
? ? ? // .attr("x",function(d){ return width - padding.right*0.8; })
? ? ? // .attr("y",function(d,i){ return padding.top * 2 + labHeight * i; })
? ? ? // .attr("dy",labRadius/2)
? ? ? // .text(function(d){ return d.name; });
? ? </script>
? </body>
</html>
