<html>
\n<head>
\n<meta charset=”utf-8″>
\n<title>Transition<\/title>
\n<\/head>
\n<style>
\n.axis path, .axis line {
\nfill: none;
\nstroke: black;
\nshape-rendering: crispEdges;
\n}
\n.axis text {
\nfont-family: sans-serif;
\nfont-size: 11px;
\n}
\n<\/style>
\n<body><\/p>\n
<script src=”http:\/\/d3js.org\/d3.v3.min.js” charset=”utf-8″><\/script>
\n<script><\/p>\n
var width = 600;
\nvar height = 600;
\nvar dataset = [];
\nvar num = 15; \/\/\u6570\u7ec4\u7684\u6570\u91cf<\/p>\n
for(var i = 0; i < num ; i++){
\nvar tempnum = Math.floor( Math.random() * 50 ); \/\/ \u8fd4\u56de 0~49 \u6574\u6570
\ndataset.push(tempnum);
\n}<\/p>\n
var svg = d3.select(“body”).append(“svg”)
\n.attr(“width”,width)
\n.attr(“height”,height);<\/p>\n
var xAxisScale = d3.scale.ordinal()
\n.domain(d3.range(dataset.length))
\n.rangeRoundBands([0,500]);<\/p>\n
var yAxisScale = d3.scale.linear()
\n.domain([0,d3.max(dataset)])
\n.range([500,0]);<\/p>\n
var xAxis = d3.svg.axis()
\n.scale(xAxisScale)
\n.orient(“bottom”);<\/p>\n
var yAxis = d3.svg.axis()
\n.scale(yAxisScale)
\n.orient(“left”);<\/p>\n
var xScale = d3.scale.ordinal()
\n.domain(d3.range(dataset.length))
\n.rangeRoundBands([0,500],0.05);<\/p>\n
var yScale = d3.scale.linear()
\n.domain([0,d3.max(dataset)])
\n.range([0,500]);<\/p>\n
svg.selectAll(“rect”)
\n.data(dataset)
\n.enter()
\n.append(“rect”)<\/p>\n
\/\/\u52a8\u6001\u5316\u5f00\u59cb
\n\/\/y\u65b9\u5411\u8fd0\u52a8
\n.attr(“y”,function(d,i){
\nreturn 50 + 500 ;
\n})<\/p>\n
.attr(“height”,0)
\n.attr(“fill”,”red”)
\n\/\/\u542f\u52a8\u8f6c\u53d8\u6548\u679c\u53ea\u9700\u8981\u6dfb\u52a0\u8fd9\u4e2a\u5373\u53ef\u3002\u628a\u5b83\u52a0\u5230\u4e24\u79cd\u72b6\u6001\u4e4b\u95f4
\n.transition()
\n\/\/\u6307\u5b9a\u6574\u4e2a\u8f6c\u53d8\u6301\u7eed\u591a\u5c11\u65f6\u95f4\uff0c\u5355\u4f4d\u4e3a\u6beb\u79d2
\n.duration(3000)<\/p>\n
\/* \u6307\u5b9a\u8f6c\u53d8\u7684\u65b9\u5f0f\uff0c\u5e38\u7528\u7684\u8f6c\u53d8\u65b9\u5f0f\u6709\uff1a<\/p>\n
linear \u666e\u901a\u7684\u7ebf\u6027\u53d8\u5316
\ncircle \u6162\u6162\u5730\u5230\u8fbe\u53d8\u6362\u7684\u6700\u7ec8\u72b6\u6001
\nelastic \u5e26\u6709\u5f39\u8df3\u7684\u5230\u8fbe\u6700\u7ec8\u72b6\u6001
\nbounce \u5728\u6700\u7ec8\u72b6\u6001\u5904\u5f39\u8df3\u51e0\u6b21
\n*\/
\n.ease(“bounce”)
\n\/*\u6307\u5b9a\u5ef6\u8fdf\u7684\u65f6\u95f4\uff0c\u8868\u793a\u4e00\u5b9a\u65f6\u95f4\u540e\u624d\u5f00\u59cb\u8f6c\u53d8\uff0c\u5355\u4f4d\u540c\u6837\u4e3a\u6beb\u79d2\u3002\u8fd9\u4e2a\u51fd\u6570\u53ef\u4ee5\u5bf9\u6574\u4f53\u6307\u5b9a\u5ef6\u8fdf\uff0c\u4e5f\u53ef\u4ee5\u5bf9\u4e2a\u522b\u6307\u5b9a\u5ef6\u8fdf\u3002*\/
\n.delay(function(d,i){
\nreturn 200*i;
\n})<\/p>\n
.attr(“x”, function(d,i){
\nreturn 30 + xScale(i);
\n} )
\n.attr(“y”,function(d,i){
\nreturn 50 + 500 – yScale(d) ;
\n})
\n.attr(“width”, function(d,i){
\nreturn xScale.rangeBand();
\n})
\n\/\/\u9ad8\u6709\u53d8\u5316
\n.attr(“height”,yScale)
\n\/\/\u989c\u8272\u6709\u53d8\u5316
\n.attr(“fill”,”steelblue”);
\n\/\/\u52a8\u6001\u5316\u5b8c\u6bd5
\nsvg.selectAll(“text”)
\n.data(dataset)
\n.enter().append(“text”)
\n.attr(“x”, function(d,i){
\nreturn 30 + xScale(i);
\n} )
\n.attr(“y”,function(d,i){
\nreturn 50 + 500 – yScale(d) ;
\n})
\n.attr(“dx”, function(d,i){
\nreturn xScale.rangeBand()\/3;
\n})
\n.attr(“dy”, 15)
\n.attr(“text-anchor”, “begin”)
\n.attr(“font-size”, 14)
\n.attr(“fill”,”white”)
\n.text(function(d,i){
\nreturn d;
\n});<\/p>\n
svg.append(“g”)
\n.attr(“class”,”axis”)
\n.attr(“transform”,”translate(30,550)”)
\n.call(xAxis);<\/p>\n
svg.append(“g”)
\n.attr(“class”,”axis”)
\n.attr(“transform”,”translate(30,50)”)
\n.call(yAxis);<\/p>\n
<\/script>
\n<\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"
<html> <head> <meta charset=”utf-8…<\/p>\n","protected":false},"author":2,"featured_media":228,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[38,56,8],"tags":[55,233],"_links":{"self":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/499"}],"collection":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/comments?post=499"}],"version-history":[{"count":1,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/499\/revisions"}],"predecessor-version":[{"id":500,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/499\/revisions\/500"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/media\/228"}],"wp:attachment":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/media?parent=499"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/categories?post=499"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/tags?post=499"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}