Blog

Blog

PHODAL

D3.js Tooltips

使用D3.js与Darge-d3构建一个简单的技能树的时候,需要一个简单的类似于小贴士的插件。

Tooltips

Tooltipster

Tooltipster是一个jQuery tooltip 插件,兼容Mozilla Firefox, Google Chrome, IE8+。

简单示例html:

    <section class="container tooltip" title="Parent container">
    <a href="http://google.com" class="tooltip" title="Get your Google on">Google</a>
</section>

简单示例`js:

    $(document).ready(function() {
        $('.tooltip').tooltipster();
    });

D3.js Tooltipster Require配置

D3.js、Tooltipster与Requirejs的配置如下所示:

require.config({
  baseUrl: 'app',
  paths: {
    jquery: 'lib/jquery-2.1.3',
    d3: 'lib/d3.min',
    text: 'lib/text',
    'jquery.tooltipster': 'lib/jquery.tooltipster.min'
  },
  'shim': {
    'jquery.tooltipster': {
      deps: ['jquery']
    }
  }
});

整合代码

最后代码如下所示:

  inner.selectAll('g.node')
    .each(function (v, id) {


      g.node(v).books = Utils.handleEmptyDocs(g.node(v).books);
      g.node(v).links = Utils.handleEmptyDocs(g.node(v).links);

      var data = {
        id: id,
        name: v,
        description: g.node(v).description,
        books: g.node(v).books,
        links: g.node(v).links
      };
      var results = lettuce.Template.tmpl(description_template, data);

      $(this).tooltipster({
        content: $(results),
        contentAsHTML: true,
        position: 'left',
        animation: 'grow',
        interactive: true});
      $(this).find('rect').css('fill', '#ecf0f1');
    });

结束

代码见: https://github.com/phodal/sherlock

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Engineer, Consultant, Writer, Designer

ThoughtWorks 技术专家

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 最新技术分享

标签