kk匡的日記&學習筆記

1. 首先要有一组Data Set数据

var dataSet = [
  [8000, 22, "慕一凡"],
  [5000, 26, "狐小小"],
  [2000, 25, "崔亦旋"],
  [9000, 35, "干韶阳"],
  [6000, 31, "陈雅蕊"],
  [1000, 23, "冉雪漫"],
  [4000, 26, "仁蕴和"]
];

2. 定义图表的长宽

var w = 600;
var h = 300;

3. 选取HML标签<ScatterPlot> </ScatterPlot>

...
<br />
<ScatterPlot> </ScatterPlot>
<br />
...

var svg = d3.select("ScatterPlot")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

4. 显示X轴尺、([0, 10000])是Data Set里的最大和最小值。range([0, 600])是把Data Set的数据Map进ScatterPlot的长度

var mapX = d3.scale.linear()
  .domain([0, 10000])
  .range([0, 600]);

5. 显示Y轴尺

var mapY = d3.scale.linear()
  .domain([38, 18])
  .range([0, 300]);

6. 显示X轴尺被细分成多少。现在X轴尺细分8等分

var Xaxis = d3.svg.axis()
  .scale(mapX)
  .orient("bottom")
  .ticks(8);

7. 显示Y轴尺被细分成多少

var Yaxis = d3.svg.axis()
  .scale(mapY)
  .orient("left")
  .ticks(8);

8. 显示ScatterPlot的圆点。R是圆的半径。cx和cy是X轴和Y轴的圆点mapping。因为图表的长是宽的2倍，所以cy是2

svg.selectAll("circle")
  .data(dataSet)
  .enter()
  .append("circle")
  .attr("cx", function(d) {
    return mapX(d[0]);
  })
  .attr("cy", function(d) {
    return mapY(d[1]);
  })
  .attr("r", function(d) {
    return 10;
  })
  .attr("fill", "#59e3a0");

9.显示圆点旁的文字。mapX(d[0])+12是右移12pixel、mapY(d[1])+6是下移6pixel、d[2]是指显示dataSet中第2个值姓名

svg.selectAll("text")
  .data(dataSet)
  .enter()
  .append("text")
  .text(function(d) {
    return d[2];
  })
  .attr("x", function(d) {
    return mapX(d[0])+12;
  })
  .attr("y", function(d) {
    return mapY(d[1])+6;
  })
  .attr("font-family", "sans-serif")
  .attr("font-size", "12px")
  .attr("fill", "#e35b59");

10. X轴的显示样式

svg.append("g")
  .attr("class","axis")
  .attr("transform","translate(30,280)")
  .attr("font-family", "sans-serif")
  .attr("font-size", "12px")
  .attr("fill", "#c4c4c4")
  .call(Xaxis);

11. Y轴的显示样式

svg.append("g")
  .attr("class","axis")
  .attr("transform","translate(30,-20)")
  .attr("font-family", "sans-serif")
  .attr("font-size", "12px")
  .attr("fill", "#c4c4c4")
  .call(Yaxis);

12. X轴和Y轴的CSS样式

.axis path,
.axis line{
  fill: none;
  stroke: #c4c4c4;
  shape-rendering: crispEdges;
}