三角形エリア内n個テキスト表示 hitkite Follow 2017-07-03 21:08:20 License: MIT License Fork0 Fav0 View543 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 22 lines HTML 10 lines CSS 24 lines D3.js 三角形エリアにn個のテキストを描写する。 三角形エリア内n個テキスト表示 multiFociForceLayout setData2 setDataForMandalArt subTitle svgFrame //読み込み時の表示 window_load(); //ウィンドウサイズ変更時に更新 window.onresize = window_load; var data = setData(); var subTitleTexts = []; var leafsdata = []; 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; console.log(leafsdata); svg.call(zoom); subTitle(subTitleTexts); //var leafsdata = setData2(); 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> 三角形エリア内n個テキスト表示 * { 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 ); } text { stroke: white; cursor:pointer; //font-size: 10px; } D3.js 三角形エリアにn個のテキストを描写する。 //読み込み時の表示 window_load(); //ウィンドウサイズ変更時に更新 window.onresize = window_load; var data = setData(); var subTitleTexts = []; var leafsdata = []; 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; console.log(leafsdata); svg.call(zoom); subTitle(subTitleTexts); //var leafsdata = setData2(); 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 ); } text { stroke: white; cursor:pointer; //font-size: 10px; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? D3.js 三角形エリアにn個のテキストを描写する。 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/Sros/js"></script> art&design html5_elements&api library&test user_interface Discussion Questions on this code? Tags art&design html5_elements&api library&test user_interface
