<!doctype html> <meta charset="utf-8"> <html> <head> <title>D3 tutorial</title> <!-- <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> --> <script src="d3.min.js" charset="utf-8"></script> <style type="text/css"> div.chart{ font-family:sans-serif; font-size:0.7em; } div.bar { background-color:#a3b466; color:white; height:2em; line-height:2em; padding-right:1em; margin-left:22em; margin-top:5px; margin-bottom:2px; text-align:right; } div.label { background-color:#c364a7; color:white; height:2em; line-height:2em; padding-right:1em; margin-bottom:2px; float:left; width:20em; text-align:right; } </style> </head> <body> <p> p </p> <script > var data=[{ "count": 2677.09756097561, "id": 1, "name": "Robert F. Kennedy Bridge Bronx Plaza" }, { "count": 260, "id": 2, "name": "Bridge " }, { "count": 800, "id": 3, "name": " Bronx Plaza" }, { "count": 2000, "id": 4, "name": " Plaza" }, ]; d3.select("body") .append("div") .attr("class", "chart") .selectAll("div.line") .data(data) .enter() .append("div") .attr("class","line"); d3.selectAll("div.line") .append("div") .attr("class","label") .text(function(d){return d.name}); d3.selectAll("div.line") .append("div") .attr("class","bar") .style("width", function(d){return d.count/10 + "px"}) .text(function(d){return Math.round(d.count)}); // circle //圆心x坐标 cy圆心y坐标 r半径 var datacircle=[ { "cx": 10, "cy": 20, "r": 10, "stroke":"orange", "color":"#c364a7" }, { "cx": 10, "cy": 50, "r": 10, "stroke":"orange", "color":"#c364a7" }, { "cx": 10, "cy": 80, "r": 10, "stroke":"orange", "color":"purple" }, ]; var margin = 50, width = 700, height = 300; d3.select("body") .append("svg") .attr("width", width) .attr("height", height) .selectAll("circle") .data(datacircle) .enter() .append("circle"); d3.selectAll("circle") .attr("cx", function(d,i) { return d.cx+i*30; }) .attr("cy", function(d,i) { return d.cy+i*50; }) .attr("r", function(d,i) { return d.r+i*16; }) .attr("stroke", function(d) { return d.stroke; }) .style("fill", function(d) { return d.color; }); </script> </body> </html>