d3-pedigree-examples, 如何创建具有D3的族血统的示例

分享于 

5分钟阅读

GitHub

  繁體 雙語
Examples of how to create family pedigrees with D3
  • 源代码名称:d3-pedigree-examples
  • 源代码网址:http://www.github.com/justincy/d3-pedigree-examples
  • d3-pedigree-examples源代码文档
  • d3-pedigree-examples源代码下载
  • Git URL:
    git://www.github.com/justincy/d3-pedigree-examples.git
    Git Clone代码到本地:
    git clone http://www.github.com/justincy/d3-pedigree-examples
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/justincy/d3-pedigree-examples
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    d3-pedigree-examples

    使用 D3 v3创建传统样式族家谱的示例。

    当我开始学习如何用三角树绘制家族时,我难以混合和匹配不同的例子。 希望通过展示基本的基础和如何增量增加高级功能,你不必成为一个专家。

    我的要求是:

    • 方形方块和直连接线的树。 大多数D3树示例使用圆和曲线连接线。
    • generation 之间需要有固定距离。 默认情况下,D3树填充给它们的所有可用空间。
    • 这棵树需要可以伸缩和可折叠的
    • 需要一种方法来显示的祖先和后代
    • 平移和缩放

    示例

    注释
    • 通过鼠标平移和缩放在所有示例中都是启用的。

    • 在代码中,经常会看到变量 d 作为匿名函数的惟一参数。 d 是一个代表数据的D3约定。

    • D3树布局配置为顶部-> 底部显示。 我们需要左-> 右显示,以便仅对节点和链接翻转x 和y 坐标。 使用屏幕坐标代替笛卡尔坐标,使得这一点变得更加复杂。

      假设 node 计算 root 将在 (10,10) 处显示,子 below 在 (10,20) 处显示。 当x 和y 在 (10,10) 处离开 root,但将子元素移动到右边,现在就向右移动。 这给了我们传统的左祖先谱系视图。

      显示后代,我们交换x 和y,然后将把子节点放在左边的x 值。

    • 为了同时显示祖先和后代,你必须绘制两种不同的树,这大大增加了。 如果你需要这样做,我强烈建议采用OOP方法。 就像你在源代码中看到的那样,它会变得非常多毛。

    • 在SVG中显示格式化文本可能是一种痛苦,因为你很少控制。 没有建立文本包装方式的方法,也不能在句子中轻松地样式化一个词或者短语。 为了绕过这些限制,你可以使用 foreignObject 插件来显示 HTML,并拥有CSS的所有格式工具。 但是,任何 IE ( 11是撰写文章时的最新版本) 版本都不支持 foreignObject。 如果你需要支持任何版本的IE,那么你需要坚持纯 SVG。 因为我们使用 D3,我们可以使用方便的D3plus 库来帮助文本换行。 参见文本换行示例。

    • D3不处理谱系 collapse。 三维树被设计为只有分支,没有建立的机制允许树的collapse。 以下是处理这里问题的一些选项:

    • 复制公共祖先节点而不是折叠子元素。 只有在不使用动态树的情况下,这才是可行的。 当D3处理动态树更新时,它依赖所有具有惟一标识的节点。 因这里,为了使这个动态树成为一个动态树,你需要为每个重复的人生成唯一的in。

    • 只允许一次显示一个公共的祖先来允许继承。 我们将让D3绘制第一个连接,然后手动绘制所有其他连接。 这不是简单的,尤它的是如果你想要一个动态树。 这里有一个示例。 它似乎不是一个能很好地扩展的解决方案。

    • 尝试使用 dagre插件,这是一个用于呈现DAGs的库 desgigned。 有一个 add-on 可以用于集成与d3呼叫 dagre-d3。 我没有这个经验,但似乎是一个可行的解决方案。


    相关文章