Mais conteúdo relacionado
Semelhante a Playing with d3.js (20)
Playing with d3.js
- 9. example 1 <html> <head> <script src= "../d3.js" ></script> </head> <body> <div class= "chart" id= "chart" ></div> <script> var data = [2, 16, 28, 25, 29]; // set raw data var chart = d3.select("#chart"); chart.style("width", 300) // set object range style .style("text-align","right") .style("border", "3px") .style("border-style", "solid") .style("border-color", "pink"); chart.selectAll("div") // set all items bind data and style .data(data) .enter() .append("div") .text( function (item) { return item; }) .style("width", function (item) { return item * 10 + "px"; }) .style("background-color", "steelblue") .style("color", "white") .style("margin", "1.5px"); </script> </body> </html>
- 10. example 2 <html> <head> <script type= "text/javascript" src= "../d3.js" ></script> </head> <body> <div id= 'viz' ></div> <div id= 'haha' ></div> <script> var sampleSVG = d3.select("#viz") .append("svg:svg") .style("width", "200px") .style("height", "200px") .style("border-style","solid") .style("border-color","steelblue"); sampleSVG.append("svg:circle") .style("stroke", "deeppink") .style("stroke-width", "3px") .style("fill", "steelblue") .attr("r", 40) // r : circle's radius. .attr("cx", 50) // cx: x-axis center of the circle .attr("cy", 50) // cy: y-axis center of the circle .transition() // start to change #viz’s style .delay(200) // wait (1/1000 second) .duration(1000) // duration to change the style (1/1000sec) .attr("r", 10) // r : circle's radius. .attr("cx", 185) // cx: x-axis center of the circle .attr("cy",185) // cy: y-axis center of the circle .style("fill", "pink") .transition() .delay(1000) .duration(1000); </script> </body> </html>
![Playing with d3.js Ida Wang [email_address] 2011-12-21 [WoFoss]](https://image.slidesharecdn.com/playingwithd3-111222033549-phpapp02/85/Playing-with-d3-js-1-320.jpg)
![Agenda ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)