1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <meta charset= "utf-8" > <title>D3.js サンプル</title> <link rel= "stylesheet" href= "css/main.css" > <style> svg { border: 1px solid black; } </style> </head> <body> <h1>D3.jsサンプル</h1> <div id= "myGraph" ></div> <script src= "js/sample.js" ></script> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | var list = [10, 30, 5, 60, 40, 178, 56, 130, 24, 80]; var svgWidth = 320; // SVG領域の横幅 var svgHeight = 240; // SVG領域の縦幅 // SVGの表示領域を生成 var svg = d3.select( "#myGraph" ).append( "svg" ) .attr( "width" , svgWidth).attr( "height" , svgHeight) // 折れ線を生成 var line = d3.svg.line() .x( function (d, i){ return i * svgWidth/(list.length-1); }) // 横方向はSVG領域に合わせて調整。データは最低2個あるのが前提 .y( function (d){ return svgHeight-d; }) // 縦方向は数値そのままでスケール等しない // 折れ線グラフを描画 svg.append( "path" ) .attr( "d" , line(list)) // 線を描画 .attr( "stroke" , "black" ) // 線の色を指定 .attr( "stroke-width" , 2) // 線の太さ .attr( "stroke-dasharray" , "5, 2" ) // 点線の実線と間隔を交互に指定 .attr( "fill" , "none" ); // 塗り潰しなし。指定しないと黒色で塗り潰される |