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.
263 lines
22 KiB
HTML
263 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="http://phpspot.org/blog/archives/2019/04/treeviz.html" name="og:url">
|
|
|
|
<title>マインドマップ風のツリーを描画できる「Treeviz」:phpspot開発日誌</title>
|
|
|
|
<link rel="stylesheet" href="http://phpspot.org/blog/styles-site.css?201102_d" type="text/css">
|
|
<link rel="stylesheet" href="http://phpspot.org/blog/css/buttons.css?4" type="text/css">
|
|
<link rel="stylesheet" href="http://phpspot.org/blog/js/fbox/js/facebox.css?3" type="text/css">
|
|
<link rel="stylesheet" href="http://phpspot.org/blog/js/prettify/prettify.css" type="text/css">
|
|
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://phpspot.org/blog/index.xml">
|
|
<link rel="alternate" type="application/atom+xml" title="Atom" href="http://phpspot.org/blog/atom.xml">
|
|
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://phpspot.org/blog/index.rdf">
|
|
<link rel="alternate" media="handheld" type="application/x-httpd-cgi" href="http://phpspot.org/blog/m/?id=2&mode=individual&no=1&eid=9427">
|
|
<link rel="shortcut icon" href="http://phpspot.org/blog/favicon.ico">
|
|
<link rel="start" href="http://phpspot.org/blog/" title="Home">
|
|
<link rel="canonical" href="http://phpspot.org/blog/archives/2019/04/treeviz.html">
|
|
<link rel="prev" href="http://phpspot.org/blog/archives/2019/04/css3jquerysahan.html" title="CSS3とjQueryで作ったテキストアニメーション「sahansira/Text-Slider」">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="fb-root"></div>
|
|
|
|
|
|
<div id="container">
|
|
|
|
<div id="banner">
|
|
<div id="blogtitle">
|
|
<h1><a href="http://phpspot.org/blog/" accesskey="1"><img src="http://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="http://phpspot.org/blog/"><img src="http://phpspot.org/blog/img/menu_home.gif" alt="HOME"></a></li>
|
|
<li><a href="http://phpspot.org/blog/archives/2008/01/about.html"><img src="http://phpspot.org/blog/img/menu_about.gif" alt="このブログについて"></a></li>
|
|
<li><a href="http://phpspot.org/blog/archives/2008/01/mobile.html"><img src="http://phpspot.org/blog/img/menu_mobile.gif" alt="モバイル版"></a></li>
|
|
<li><a href="http://phpspot.org/blog/index.xml"><img src="http://phpspot.org/blog/img/menu_rss.gif" alt="RSSフィード"></a></li>
|
|
<li><a href="http://twitter.com/phpspot_kj"><img src="http://phpspot.org/blog/img/menu_twitter.gif" alt="Twitter"></a></li>
|
|
<li><a href="http://phpspot.org/blog/archives/2009/01/mailmagazine.html" rel="nofollow"><img src="http://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="http://phpspot.org/blog/img/menu_p_top.jpg" alt="phpspot"></a></li>
|
|
<li><a href="http://phpspot.net/php/phpeditor.html"><img src="http://phpspot.org/blog/img/menu_p_editor.jpg" alt="PHPエディタ"></a></li>
|
|
<li><a href="http://phpspot.net/php/php_topics.html"><img src="http://phpspot.org/blog/img/menu_p_begin.jpg" alt="PHP入門"></a></li>
|
|
<li><a href="http://phpspot.net/php/sample.html"><img src="http://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="http://phpspot.org/blog/img/menu_p_script.jpg" alt="PHPスクリプト"></a></li>
|
|
<li><a href="http://phpspot.net/php/rentalserver.php"><img src="http://phpspot.org/blog/img/menu_p_server.jpg" alt="PHPレンタルサーバー"></a></li>
|
|
<li><img src="http://phpspot.org/blog/img/menu_bd_b.jpg" alt><a href="http://javascriptist.net/"><img src="http://phpspot.org/blog/img/menu_j_top.jpg" alt="JavaScriptist"></a></li>
|
|
<li><a href="http://javascriptist.net/docs/js_beginners.html"><img src="http://phpspot.org/blog/img/menu_j_begin.jpg" alt="JavaScript入門"></a></li>
|
|
<li><a href="http://javascriptist.net/docs/samples.html"><img src="http://phpspot.org/blog/img/menu_j_sample.jpg" alt="JavaScript逆引きサンプル集"></a></li>
|
|
<li><a href="http://javascriptist.net/docs/js_ref.html"><img src="http://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="http://phpspot.org/blog/archives/2019/04/css3jquerysahan.html" title="CSS3とjQueryで作ったテキストアニメーション「sahansira/Text-Slider」">CSS3とjQueryで作ったテキストアニメーション「sahansira/Text-Slider」</a><br>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<h3 class="hl">マインドマップ風のツリーを描画できる「Treeviz」</h3>
|
|
<h4 class="hl">2019年04月04日-<a href="http://b.hatena.ne.jp/entry/http://phpspot.org/blog/archives/2019/04/treeviz.html" rel="nofollow"><img src="http://b.hatena.ne.jp/entry/image/http://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="http://phpspot.org/blog/archives/2011/11/arborjs.html">複数要素の関連をビジュアライズできるライブラリ「arbor.js」</a></li>
|
|
<li><a href="http://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="http://phpspot.org/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="http://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/http://phpspot.org/blog/" target="_blank" title="livedoor Readerで購読"><img src="http://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="http://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="http://phpspot.org/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="http://phpspot.org/blog/categories/jQuery">jQuery</a> <a class="cbSmall cButton cbcBlue" href="http://phpspot.org/blog/categories/Photoshop">Photoshop</a> <a class="cbSmall cButton cbcBlue" href="http://phpspot.org/blog/categories/PHP">PHP</a> <a class="cbSmall cButton cbcOrange" href="http://phpspot.org/blog/categories/HTML5">HTML5</a> <a class="cbSmall cButton cbcGreen" href="http://phpspot.org/blog/categories/CSS">CSS</a> <a class="cbSmall cButton cbcRed" href="http://phpspot.org/blog/categories/JavaScript">JavaScript</a> <a class="cbSmall cButton cbcPink" href="http://phpspot.org/blog/categories/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3">デザイン</a> <a class="cbSmall cButton cbcGreen" href="http://phpspot.org/blog/categories/Web%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9">Webサービス</a> <a class="cbSmall cButton cbcGray" href="http://phpspot.org/blog/categories/%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3">アイコン</a> <a class="cbSmall cButton cbcBlue" href="http://phpspot.org/blog/categories/WordPress">WordPress</a> <a class="cbSmall cButton cbcYellow" href="http://phpspot.org/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="http://phpspot.org/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="http://phpspot.org/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="http://phpspot.org/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="http://phpspot.org/blog/archives/2008/01/advertise.html"><img src="http://phpspot.org/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>オススメサイト</span>
|
|
</div>
|
|
|
|
<div style="text-align:center;margin-bottom:6px;padding-bottom:4px;">
|
|
<a href="https://ja.wix.com/">Wixでホームページ作成</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="http://phpspot.org/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="http://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="http://phpspot.org/blog/archives/2019/04/treeviz.html">マインドマップ風のツリーを描画できる「Treeviz」</a> <a href="http://b.hatena.ne.jp/entry/http://phpspot.org/blog/archives/2019/04/treeviz.html" rel="nofollow"><img src="http://b.hatena.ne.jp/entry/image/http://phpspot.org/blog/archives/2019/04/treeviz.html" border="0" height="13" align="absmiddle"></a></li><li><a href="http://phpspot.org/blog/archives/2019/04/css3jquerysahan.html">CSS3とjQueryで作ったテキストアニメーション「sahansira/Text-Slider」</a> <a href="http://b.hatena.ne.jp/entry/http://phpspot.org/blog/archives/2019/04/css3jquerysahan.html" rel="nofollow"><img src="http://b.hatena.ne.jp/entry/image/http://phpspot.org/blog/archives/2019/04/css3jquerysahan.html" border="0" height="13" align="absmiddle"></a></li><li><a href="http://phpspot.org/blog/archives/2019/03/uibootstrapinpu.html">微調整できる数値入力のUI「bootstrap-input-spinner」</a> <a href="http://b.hatena.ne.jp/entry/http://phpspot.org/blog/archives/2019/03/uibootstrapinpu.html" rel="nofollow"><img src="http://b.hatena.ne.jp/entry/image/http://phpspot.org/blog/archives/2019/03/uibootstrapinpu.html" border="0" height="13" align="absmiddle"></a></li><li><a href="http://phpspot.org/blog/archives/2019/03/js_13.html">JSで背景がグリグリダイナミックに動くサンプル</a> <a href="http://b.hatena.ne.jp/entry/http://phpspot.org/blog/archives/2019/03/js_13.html" rel="nofollow"><img src="http://b.hatena.ne.jp/entry/image/http://phpspot.org/blog/archives/2019/03/js_13.html" border="0" height="13" align="absmiddle"></a></li><li><a href="http://phpspot.org/blog/archives/2019/03/radiosimple_but.html">シンプルだけどモダンなradioボタンを実装できる「Simple button radios」</a> <a href="http://b.hatena.ne.jp/entry/http://phpspot.org/blog/archives/2019/03/radiosimple_but.html" rel="nofollow"><img src="http://b.hatena.ne.jp/entry/image/http://phpspot.org/blog/archives/2019/03/radiosimple_but.html" border="0" height="13" align="absmiddle"></a></li><li><a href="http://phpspot.org/blog/archives/2019/03/ambient_canvas.html">美しい背景アニメーション集「Ambient Canvas Backgrounds」</a> <a href="http://b.hatena.ne.jp/entry/http://phpspot.org/blog/archives/2019/03/ambient_canvas.html" rel="nofollow"><img src="http://b.hatena.ne.jp/entry/image/http://phpspot.org/blog/archives/2019/03/ambient_canvas.html" border="0" height="13" align="absmiddle"></a></li><li><a href="http://phpspot.org/blog/archives/2019/03/ervy.html">ターミナル上にグラフを描画できる「Ervy」</a> <a href="http://b.hatena.ne.jp/entry/http://phpspot.org/blog/archives/2019/03/ervy.html" rel="nofollow"><img src="http://b.hatena.ne.jp/entry/image/http://phpspot.org/blog/archives/2019/03/ervy.html" border="0" height="13" align="absmiddle"></a></li><li><a href="http://phpspot.org/blog/archives/2019/03/image_reveal_ho.html">ホバーでかっこよくイメージをプレビューする「Image Reveal Hover Effects」</a> <a href="http://b.hatena.ne.jp/entry/http://phpspot.org/blog/archives/2019/03/image_reveal_ho.html" rel="nofollow"><img src="http://b.hatena.ne.jp/entry/image/http://phpspot.org/blog/archives/2019/03/image_reveal_ho.html" border="0" height="13" align="absmiddle"></a></li><li><a href="http://phpspot.org/blog/archives/2019/03/wysiwygslate.html">カスタマイズ可能でモダンなWYSIWYGエディタ実装「slate」</a> <a href="http://b.hatena.ne.jp/entry/http://phpspot.org/blog/archives/2019/03/wysiwygslate.html" rel="nofollow"><img src="http://b.hatena.ne.jp/entry/image/http://phpspot.org/blog/archives/2019/03/wysiwygslate.html" border="0" height="13" align="absmiddle"></a></li><li><a href="http://phpspot.org/blog/archives/2019/03/post_719.html">右クリックで円形メニューを実装</a> <a href="http://b.hatena.ne.jp/entry/http://phpspot.org/blog/archives/2019/03/post_719.html" rel="nofollow"><img src="http://b.hatena.ne.jp/entry/image/http://phpspot.org/blog/archives/2019/03/post_719.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="http://phpspot.org/blog/#oldcontent">過去のエントリ</a></li></ul>
|
|
<iframe src="http://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="http://phpspot.org/blog/img/footcopy.jpg" align="absmiddle" alt>　 <span class="sep">|</span>　
|
|
<a href="http://phpspot.org/blog/archives/2019/04/treeviz.html#top" id="totoplink">↑ページの先頭へ</a> <span class="sep">|</span>
|
|
<a href="http://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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<noscript>
|
|
<a href="http://w1.ax.xrea.com/c.f?id=100703880" target="_blank"><img src="http://w1.ax.xrea.com/l.f?id=100703880&url=X" alt="AX" border="0"></a>
|
|
</noscript>
|
|
</body>
|
|
</html> |