You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
252 lines
22 KiB
HTML
252 lines
22 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="Content-Type" value="text/html; charset=utf-8">
|
|
|
|
<meta value="マインドマップ風のツリーを描画できる「Treeviz」:phpspot開発日誌" name="og:title">
|
|
<meta value="phpspot開発日誌" name="og:site_name">
|
|
<meta value="PHP/HTML5/CSS3/JavaScript/CSS等の最新技術情報をお届け" name="og:description">
|
|
<meta value="article" name="og:type">
|
|
<meta value="//phpspot.org/blog/archives/2019/04/treeviz.html" name="og:url">
|
|
|
|
<title>マインドマップ風のツリーを描画できる「Treeviz」:phpspot開発日誌</title>
|
|
|
|
<link rel="stylesheet" href="//phpspot.org/blog/styles-site.css?201102_d" type="text/css">
|
|
<link rel="stylesheet" href="//phpspot.org/blog/css/buttons.css?4" type="text/css">
|
|
<link rel="stylesheet" href="//phpspot.org/blog/js/fbox/js/facebox.css?3" type="text/css">
|
|
<link rel="stylesheet" href="//phpspot.org/blog/js/prettify/prettify.css" type="text/css">
|
|
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="//phpspot.org/blog/index.xml">
|
|
<link rel="alternate" type="application/atom+xml" title="Atom" href="//phpspot.org/blog/atom.xml">
|
|
<link rel="alternate" type="application/rss+xml" title="RSS" href="//phpspot.org/blog/index.rdf">
|
|
<link rel="alternate" media="handheld" type="application/x-httpd-cgi" href="//phpspot.org/blog/m/?id=2&mode=individual&no=1&eid=9427">
|
|
<link rel="shortcut icon" href="/blog/favicon.ico">
|
|
<link rel="start" href="//phpspot.org/blog/" title="Home">
|
|
<link rel="canonical" href="//phpspot.org/blog/archives/2019/04/treeviz.html">
|
|
<link rel="prev" href="//phpspot.org/blog/archives/2019/04/css3jquerysahan.html" title="CSS3とjQueryで作ったテキストアニメーション「sahansira/Text-Slider」">
|
|
<link rel="next" href="//phpspot.org/blog/archives/2019/04/faviconfavloade.html" title="faviconをローディングアニメーションさせる「favloader」">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="fb-root"></div>
|
|
|
|
|
|
<div id="container">
|
|
|
|
<div id="banner">
|
|
<div id="blogtitle">
|
|
<h1><a href="/blog/" accesskey="1"><img src="//phpspot.org/blog/img/title.jpg" border="0" alt="phpspot開発日誌"></a></h1>
|
|
<h2>PHP/Ajax/JavaScript/CSS/デザイン等のWEB開発に関する最新技術情報をお届け</h2>
|
|
</div>
|
|
<div id="largebanner">
|
|
|
|
|
|
</div>
|
|
|
|
<div id="topmenubar">
|
|
<ul>
|
|
<li><a href="/blog/"><img src="//phpspot.org/blog/img/menu_home.gif" alt="HOME"></a></li>
|
|
<li><a href="/blog/archives/2008/01/about.html"><img src="//phpspot.org/blog/img/menu_about.gif" alt="このブログについて"></a></li>
|
|
<li><a href="/blog/archives/2008/01/mobile.html"><img src="//phpspot.org/blog/img/menu_mobile.gif" alt="モバイル版"></a></li>
|
|
<li><a href="//phpspot.org/blog/index.xml"><img src="//phpspot.org/blog/img/menu_rss.gif" alt="RSSフィード"></a></li>
|
|
<li><a href="http://twitter.com/phpspot_kj"><img src="//phpspot.org/blog/img/menu_twitter.gif" alt="Twitter"></a></li>
|
|
<li><a href="/blog/archives/2009/01/mailmagazine.html" rel="nofollow"><img src="//phpspot.org/blog/img/menu_mailmagazine.gif" alt="メルマガ"></a></li>
|
|
</ul>
|
|
<div id="searchform">
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="submenubar">
|
|
<div id="submenubar_rel">
|
|
<ul>
|
|
<li><a href="http://phpspot.net/php/"><img src="//phpspot.org/blog/img/menu_p_top.jpg" alt="phpspot"></a></li>
|
|
<li><a href="http://phpspot.net/php/phpeditor.html"><img src="//phpspot.org/blog/img/menu_p_editor.jpg" alt="PHPエディタ"></a></li>
|
|
<li><a href="http://phpspot.net/php/php_topics.html"><img src="//phpspot.org/blog/img/menu_p_begin.jpg" alt="PHP入門"></a></li>
|
|
<li><a href="http://phpspot.net/php/sample.html"><img src="//phpspot.org/blog/img/menu_p_sample.jpg" alt="PHPサンプル集"></a></li>
|
|
<li><a href="http://phpspot.net/php/pg%82o%82g%82o%83X%83N%83%8A%83v%83g.html"><img src="//phpspot.org/blog/img/menu_p_script.jpg" alt="PHPスクリプト"></a></li>
|
|
<li><a href="http://phpspot.net/php/rentalserver.php"><img src="//phpspot.org/blog/img/menu_p_server.jpg" alt="PHPレンタルサーバー"></a></li>
|
|
<li><img src="/blog/img/menu_bd_b.jpg" alt=""><a href="http://javascriptist.net/"><img src="//phpspot.org/blog/img/menu_j_top.jpg" alt="JavaScriptist"></a></li>
|
|
<li><a href="http://javascriptist.net/docs/js_beginners.html"><img src="//phpspot.org/blog/img/menu_j_begin.jpg" alt="JavaScript入門"></a></li>
|
|
<li><a href="http://javascriptist.net/docs/samples.html"><img src="//phpspot.org/blog/img/menu_j_sample.jpg" alt="JavaScript逆引きサンプル集"></a></li>
|
|
<li><a href="http://javascriptist.net/docs/js_ref.html"><img src="//phpspot.org/blog/img/menu_j_ref.jpg" alt="JavaScriptリファレンス"></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
|
|
<div id="con_left">
|
|
|
|
|
|
|
|
<div id="article_navi">
|
|
前の記事 ≪：<a href="//phpspot.org/blog/archives/2019/04/css3jquerysahan.html" title="CSS3とjQueryで作ったテキストアニメーション「sahansira/Text-Slider」">CSS3とjQueryで作ったテキストアニメーション「sahansira/Text-Slider」</a><br>
|
|
|
|
次の記事 ≫：<a href="//phpspot.org/blog/archives/2019/04/faviconfavloade.html" title="faviconをローディングアニメーションさせる「favloader」">faviconをローディングアニメーションさせる「favloader」</a><br>
|
|
|
|
</div>
|
|
|
|
|
|
<h3 class="hl">マインドマップ風のツリーを描画できる「Treeviz」</h3>
|
|
<h4 class="hl">2019年04月04日-<a href="http://b.hatena.ne.jp/entry///phpspot.org/blog/archives/2019/04/treeviz.html" rel="nofollow"><img src="http://b.hatena.ne.jp/entry/image///phpspot.org/blog/archives/2019/04/treeviz.html" align="absmiddle" style="vertical-align:middle;margin-right:6px;" alt="はてなブックマーク" border="0"></a></h4>
|
|
|
|
<div style="background-color:#FFFFFF;padding:4px;border-bottom:solid 1px #F2F2F2;margin-bottom:6px;">
|
|
<span class="spons">スポンサード リンク</span><br>
|
|
|
|
|
|
</div><div style="background-color:#FFFFFF;padding:4px;border-bottom:solid 1px #F2F2F2;margin-bottom:6px;">
|
|
<a href="http://remindo.hatenablog.com/entry/2017/03/05/101809">[PR]　英単語を忘却曲線アプリを使って超効率よく記憶する方法</a></div>
|
|
<div class="entrybody">
|
|
<p><a href="https://codepen.io/pierrecapo/full/MPbBdv" target="_blank">Treeviz</a><br>
|
|
<br>
|
|
マインドマップ風のツリーを描画できる「Treeviz」<br>
|
|
次のような図形を描画できるcodepenでのサンプルです<br>
|
|
<img src="http://phpspot.net/php/webimager/admin3/data/4a79a2cfdd0dd3624fd5590d4ea50c17.png"><br>
|
|
<br>
|
|
関連エントリ</p>
|
|
<ul>
|
|
<li><a href="//phpspot.org/blog/archives/2011/11/arborjs.html">複数要素の関連をビジュアライズできるライブラリ「arbor.js」</a></li>
|
|
<li><a href="//phpspot.org/blog/archives/2008/09/post_243.html">データを視覚的に分かりやすくビジュアライズするためのライブラリ集</a></li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div id="socialbutton" class="clearfix">
|
|
<div id="s_hatena"></div>
|
|
<div id="s_followme"><a href="http://twitter.com/phpspot_kj"><img src="/blog/img/followme.png" border="0"></a></div>
|
|
<div id="s_twitter" style="width:95px"></div>
|
|
<div id="s_fbshare"></div>
|
|
<div id="s_facebook" style="width:95px;"></div>
|
|
<div id="s_ggl" style="width:100px;"><g:plusone size="medium"></g:plusone></div>
|
|
</div>
|
|
<div style="background-color:#FFFFFF;padding:4px;border-top:solid 1px #F2F2F2;margin-bottom:0px;margin-top:4px">
|
|
<span class="spons">スポンサード リンク</span><br>
|
|
|
|
|
|
</div><div class="fb-comments" data-href="//phpspot.org/blog/archives/2019/04/treeviz.html" data-num-posts="5" data-width="530" style="margin-top:8px;"></div><p class="posted" style="text-align:center"><span style="font-size:0.9em">By.KJ : 2019年04月04日 09:00</span> <a href="http://reader.livedoor.com/subscribe///phpspot.org/blog/" target="_blank" title="livedoor Readerで購読"><img src="//phpspot.org/blog/img/livedoor.gif" border="0" width="90" height="16" alt="livedoor Readerで購読" align="absmiddle" style="vertical-align:middle"></a> <a href="http://twitter.com/home?status=RT+%40phpspot_kj+%3A+%E3%83%9E%E3%82%A4%E3%83%B3%E3%83%89%E3%83%9E%E3%83%83%E3%83%97%E9%A2%A8%E3%81%AE%E3%83%84%E3%83%AA%E3%83%BC%E3%82%92%E6%8F%8F%E7%94%BB%E3%81%A7%E3%81%8D%E3%82%8B%E3%80%8CTreeviz%E3%80%8D+http%3A%2F%2Fphpspot.org%2Fblog%2Farchives%2F2019%2F04%2Ftreeviz.html" title="Twitterに投稿" target="_blank"><img src="//phpspot.org/blog/img/retweet.gif" border="0" width="90" height="16" alt="Twitterに投稿" align="absmiddle" style="vertical-align:middle"></a><br></p><p style="margin:0px;margin-bottom:6px;border-top:solid 1px #f0f0f0;text-align:center"><a href="http://phpspot.net/php/pg%98A%97%8D%90%E6.html" style="text-decoration:none;display:block;margin-top:6px;color:#505050" rel="nofollow"><img src="/blog/img/notice.gif" align="absmiddle" border="0"> 間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)</a></p>
|
|
</div>
|
|
|
|
<div id="rightbar">
|
|
|
|
<div class="rightNaviHead"><span>TOPICS OF THIS BLOG</span><div style="margin-bottom:8px;text-align:center;"><a class="cbSmall cButton cbcGray" href="/blog/categories/jQuery">jQuery</a> <a class="cbSmall cButton cbcBlue" href="/blog/categories/Photoshop">Photoshop</a> <a class="cbSmall cButton cbcBlue" href="/blog/categories/PHP">PHP</a> <a class="cbSmall cButton cbcOrange" href="/blog/categories/HTML5">HTML5</a> <a class="cbSmall cButton cbcGreen" href="/blog/categories/CSS">CSS</a> <a class="cbSmall cButton cbcRed" href="/blog/categories/JavaScript">JavaScript</a> <a class="cbSmall cButton cbcPink" href="/blog/categories/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3">デザイン</a> <a class="cbSmall cButton cbcGreen" href="/blog/categories/Web%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9">Webサービス</a> <a class="cbSmall cButton cbcGray" href="/blog/categories/%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3">アイコン</a> <a class="cbSmall cButton cbcBlue" href="/blog/categories/WordPress">WordPress</a> <a class="cbSmall cButton cbcYellow" href="/blog/categories/%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88">フォント</a> <div style="text-align:right;padding-right:12px;"><a href="/blog/page/tags.html" rel="facebox" style="font-size:0.8em;text-decoration:none;color:#505050">分類一覧</a></div></div></div><div class="rightNaviHead"><span>Advertisements</span></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div style="text-align:center;margin-bottom:6px;padding-bottom:4px;">
|
|
<a href="http://remindo.co/" onclick="javascript:urchinTracker('/go/remindo');"><img src="/blog/img/remindo.png" alt="忘却曲線を使った記憶アプリ" border="0" width="125" height="125"><br>
|
|
<span style="font-size:11px;line-height:1.2em;margin-top:4px;margin-bottom:-5px;display:block;">忘却曲線に基づく記憶アプリ「reminDO」</span></a>
|
|
</div>
|
|
|
|
<div style="text-align:center;margin-bottom:6px;padding-bottom:4px;">
|
|
<a href="http://uranai.nosv.org/" onclick="javascript:urchinTracker('/go/uranai');"><img src="/blog/img/uranai.gif" alt="占いツクールで占い作成！" border="0"><br>
|
|
<span style="font-size:11px;line-height:1.2em;margin-top:4px;margin-bottom:-5px;display:block;">占いツクールで簡単占い作成</span></a>
|
|
<a href="http://uranai.nosv.org/u.php/chara/programmer/" onclick="javascript:urchinTracker('/go/uranaipg');" style="font-size:11px;background-color:#FFFFE1">プログラマ占い</a>
|
|
<a href="http://seibun.nosv.org/nou/" onclick="javascript:urchinTracker('/go/seibun');" style="font-size:11px;">脳内メーカー等</a>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div style="text-align:center;margin-bottom:6px;padding-bottom:4px;">
|
|
<a href="/blog/archives/2008/01/advertise.html"><img src="/blog/img/adpr.jpg" border="0" alt="広告掲載"><br>
|
|
<span style="font-size:11px;line-height:1.2em;margin-top:4px;display:block;">phpspotにて広告掲載</span></a>
|
|
</div>
|
|
|
|
|
|
<div class="rightNaviHead">
|
|
<span>SITE PROFILE</span>
|
|
</div>
|
|
|
|
<div style="text-align:center;margin-bottom:4px;padding-bottom:4px;">
|
|
<a href="http://twitter.com/phpspot_kj" target="_blank"><img src="/blog/img/twitter.png" border="0" alt="phpspot twitter"><br>
|
|
<span style="font-size:11px;line-height:1.2em;margin-top:4px;display:block;">Twitterはじめました</span></a>
|
|
</div>
|
|
|
|
<div style="margin:8px;">
|
|
<a href="//phpspot.org/blog/index.xml"><img src="http://feeds.feedburner.com/~fc/phpspot/ccuf?bg=13161A&fg=FFFFFF&anim=0" height="26" width="88" style="border:0" alt=""></a>
|
|
</div>
|
|
<div style="margin:8px;">
|
|
<a href="http://b.hatena.ne.jp/entrylist?sort=count&url=http%3A%2F%2Fphpspot.org%2F"><img src="http://b.hatena.ne.jp/bc/http://phpspot.org/blog/" alt="はてブ総数" style="border:0"></a>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div id="con_right">
|
|
|
|
<h3 class="newentries">最新のブログ記事(新着順)</h3><ul><li><a href="//phpspot.org/blog/archives/2022/08/post_743.html">和柄背景画像フリー素材</a> <a href="http://b.hatena.ne.jp/entry///phpspot.org/blog/archives/2022/08/post_743.html" rel="nofollow"><img src="http://b.hatena.ne.jp/entry/image///phpspot.org/blog/archives/2022/08/post_743.html" border="0" height="13" align="absmiddle"></a></li><li><a href="//phpspot.org/blog/archives/2022/07/svgsvgspinners.html">SVGのローディングアイコン「svg-spinners」</a> <a href="http://b.hatena.ne.jp/entry///phpspot.org/blog/archives/2022/07/svgsvgspinners.html" rel="nofollow"><img src="http://b.hatena.ne.jp/entry/image///phpspot.org/blog/archives/2022/07/svgsvgspinners.html" border="0" height="13" align="absmiddle"></a></li><li><a href="//phpspot.org/blog/archives/2022/07/post_742.html">グリッドにおしゃれなエフェクトをつけるサンプル</a> <a href="http://b.hatena.ne.jp/entry///phpspot.org/blog/archives/2022/07/post_742.html" rel="nofollow"><img src="http://b.hatena.ne.jp/entry/image///phpspot.org/blog/archives/2022/07/post_742.html" border="0" height="13" align="absmiddle"></a></li><li><a href="//phpspot.org/blog/archives/2022/06/scroll_btween.html">属性に値を設定するだけでパララックスアニメーションさせられる「Scroll Btween」</a> <a href="http://b.hatena.ne.jp/entry///phpspot.org/blog/archives/2022/06/scroll_btween.html" rel="nofollow"><img src="http://b.hatena.ne.jp/entry/image///phpspot.org/blog/archives/2022/06/scroll_btween.html" border="0" height="13" align="absmiddle"></a></li><li><a href="//phpspot.org/blog/archives/2022/06/pushinjs.html">スクロールで要素が迫ってくるようなエフェクトを作る「PushIn.js」</a> <a href="http://b.hatena.ne.jp/entry///phpspot.org/blog/archives/2022/06/pushinjs.html" rel="nofollow"><img src="http://b.hatena.ne.jp/entry/image///phpspot.org/blog/archives/2022/06/pushinjs.html" border="0" height="13" align="absmiddle"></a></li><li><a href="//phpspot.org/blog/archives/2022/05/32iconer.html">総数3.2万個のアイコンライブラリまとめサイト「Iconer」</a> <a href="http://b.hatena.ne.jp/entry///phpspot.org/blog/archives/2022/05/32iconer.html" rel="nofollow"><img src="http://b.hatena.ne.jp/entry/image///phpspot.org/blog/archives/2022/05/32iconer.html" border="0" height="13" align="absmiddle"></a></li><li><a href="//phpspot.org/blog/archives/2022/05/2000tablericons.html">2000個近いフリーのピクトグラムアイコン「tabler-icons」</a> <a href="http://b.hatena.ne.jp/entry///phpspot.org/blog/archives/2022/05/2000tablericons.html" rel="nofollow"><img src="http://b.hatena.ne.jp/entry/image///phpspot.org/blog/archives/2022/05/2000tablericons.html" border="0" height="13" align="absmiddle"></a></li><li><a href="//phpspot.org/blog/archives/2022/04/scrollmovie.html">ページスクロールで背景ムービーが動くページが作れる「ScrollMovie」</a> <a href="http://b.hatena.ne.jp/entry///phpspot.org/blog/archives/2022/04/scrollmovie.html" rel="nofollow"><img src="http://b.hatena.ne.jp/entry/image///phpspot.org/blog/archives/2022/04/scrollmovie.html" border="0" height="13" align="absmiddle"></a></li><li><a href="//phpspot.org/blog/archives/2022/04/menu.html">テキストがシャッフルされてかっこいいMENU実装</a> <a href="http://b.hatena.ne.jp/entry///phpspot.org/blog/archives/2022/04/menu.html" rel="nofollow"><img src="http://b.hatena.ne.jp/entry/image///phpspot.org/blog/archives/2022/04/menu.html" border="0" height="13" align="absmiddle"></a></li><li><a href="//phpspot.org/blog/archives/2022/03/doodle_icons.html">手書き風ピクトグラムアイコン４００種「Doodle Icons」</a> <a href="http://b.hatena.ne.jp/entry///phpspot.org/blog/archives/2022/03/doodle_icons.html" rel="nofollow"><img src="http://b.hatena.ne.jp/entry/image///phpspot.org/blog/archives/2022/03/doodle_icons.html" border="0" height="13" align="absmiddle"></a></li><li class="final" style="text-align:center;background-color:#f0f0f0;font-size:0.8em"><a href="/blog/#oldcontent">過去のエントリ</a></li></ul>
|
|
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FPhpspot-nofanpeji%2F189564564406222&width=200&colorscheme=light&show_faces=true&stream=false&header=false&height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:250px; margin-top:12px;" allowtransparency="true"></iframe>
|
|
|
|
</div>
|
|
|
|
<div style="clear:both"></div>
|
|
|
|
<div id="con_bottom">
|
|
|
|
<div id="a009427more"><div id="more">
|
|
|
|
|
|
|
|
</div></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div style="text-align:center;padding:8px;margin-top:8px;border-top:solid 1px #f0f0f0">
|
|
|
|
|
|
</div>
|
|
<div id="footer">
|
|
<img src="/blog/img/footcopy.jpg" align="absmiddle" alt="">　 <span class="sep">|</span>　
|
|
<a href="#top" id="totoplink">↑ページの先頭へ</a> <span class="sep">|</span>
|
|
<a href="//phpspot.org/blog/archives/2009/01/privacy_policy.html">プライバシーポリシー</a> <span class="sep">|</span>
|
|
<a href="http://phpspot.net/php/pg%98A%97%8D%90%E6.html">お問い合わせ</a> <span class="sep">|</span>
|
|
copyright © phpspot開発日誌
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html> |