CreatorsJobMap hitkite Follow 2017-07-05 19:39:16 License: MIT License Fork0 Fav0 View527 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 22 lines HTML 10 lines CSS 21 lines D3.js クリエイターズ・ジョブ・マップを描写する。 CreatorsJobMap mainTitle svgFrame subTitle setDataForMandalArt multiFociForceLayout //読み込み時の表示 window_load(); //ウィンドウサイズ変更時に更新 window.onresize = window_load; var data = setData(); var subTitleTexts = []; var leafsdata = []; var mainTitleText = data.name; data.children.forEach(function(val, i) { subTitleTexts.push(val.name); val.children.forEach(function(val2) { leafsdata.push( { name: val2.name, group: i }); }); }); var shift = 12; svg.call(zoom); subTitle(subTitleTexts); mainTitle(mainTitleText); multiFociForceLayout(leafsdata); <script src="http://d3js.org/d3.v3.min.js"></script> <body> <form name="winsize"> ウィンドウサイズ：横幅 = <input name="sw" type="text" size="10"> / 高さ = <input name="sh" type="text" size="10"> </form> <h1>クリエイターズ・ジョブ・マップを表示</h1> <svg id="mapchart"></svg> <p>マウスホィール：パン/ズーム ドラッグ：移動</p> <p id="result"></p> </body> CreatorsJobMap * { margin: 10; padding: 10; border: 0; } body { background: #dff; font: 10px sans-serif; } svg { width:300px; height:300px; border:1px solid green; background-image: radial-gradient( palegreen, pink ); } .masked { mask: url("#myMask"); } D3.js クリエイターズ・ジョブ・マップを描写する。 //読み込み時の表示 window_load(); //ウィンドウサイズ変更時に更新 window.onresize = window_load; var data = setData(); var subTitleTexts = []; var leafsdata = []; var mainTitleText = data.name; data.children.forEach(function(val, i) { subTitleTexts.push(val.name); val.children.forEach(function(val2) { leafsdata.push( { name: val2.name, group: i }); }); }); var shift = 12; svg.call(zoom); subTitle(subTitleTexts); mainTitle(mainTitleText); multiFociForceLayout(leafsdata); <script src="http://d3js.org/d3.v3.min.js"></script> <body> <form name="winsize"> ウィンドウサイズ：横幅 = <input name="sw" type="text" size="10"> / 高さ = <input name="sh" type="text" size="10"> </form> <h1>クリエイターズ・ジョブ・マップを表示</h1> <svg id="mapchart"></svg> <p>マウスホィール：パン/ズーム ドラッグ：移動</p> <p id="result"></p> </body> * { margin: 10; padding: 10; border: 0; } body { background: #dff; font: 10px sans-serif; } svg { width:300px; height:300px; border:1px solid green; background-image: radial-gradient( palegreen, pink ); } .masked { mask: url("#myMask"); } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? D3.js クリエイターズ・ジョブ・マップを描写する。 Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author hitkite Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/M10p/js"></script> application art&design html5_elements&api user_interface Discussion Questions on this code? Tags application art&design html5_elements&api user_interface
