D3结合Drupal8的初次尝试

接口数据

平台接口返回原始的JSON数据,如下：

Object = $1

changed: {data_type: "list", label: "Changed", description: "The time that the entity was last edited.", list: true, read_only: false, …}

created: {data_type: "list", label: "Created", description: "The time that the entity was created.", list: true, read_only: false, …}

description: {data_type: "list", label: "Description", description: "A description of the item.", list: true, read_only: false, …}

revision_translation_affected: {data_type: "list", label: "Revision translation affected", description: "Indicates if the last edit of a translation belongs to current revision.", list: true, read_only: true, …}

revision_user: {data_type: "list", label: "Revision user", description: "The user ID of the author of the current revision.", list: true, read_only: false, …}

status: {data_type: "list", label: "Publishing status", description: "A boolean indicating whether the Item is published.", list: true, read_only: false, …}

supplier_id: {data_type: "list", label: "Supplier", description: null, list: true, read_only: false, …}

type: {data_type: "list", label: "Item type", description: null, list: true, read_only: true, …}


Object Prototype

D3 Force Layout(动力图)

Javascript数据转换过程

1. 目标效果的初始数据结构

 var links = [
      {source: "同花顺", target: "IFIND", type: "resolved", rela:"主营产品"},
      {source: "同花顺", target: "手机金融信息服务", type: "resolved", rela:"主营产品"},
      {source: "同花顺", target: "互联网金融信息服务", type: "resolved", rela:"主营产品"},
      {source: "同花顺", target: "网上行情交易系统", type: "resolved", rela:"主营产品"},
      {source: "同花顺", target: "金融资讯及数据服务", type: "resolved", rela:"主营产品"},
      {source: "同花顺", target: "互联网金融", type: "resolved",rela:"主营产品"},
      {source: "同花顺", target: "金融服务", type: "resolved",rela:"主营产品"},
      {source: "手机金融信息服务", target: "金融信息服务", type: "resolved", rela:"上位产品"},
      {source: "互联网金融信息服务", target: "金融信息服务", type: "resolved", rela:"上位产品"},
      {source: "二三四五002195", target: "金融信息服务", type: "resolved", rela:"主营产品"},
      {source: "大智慧601519", target: "金融信息服务", type: "resolved", rela:"主营产品"},
      {source: "大智慧601519", target: "互联网金融信息服务", type: "resolved", rela:"主营产品"},
      {source: "金融服务", target: "移动互联网", type: "resolved", rela:"上游"},
      {source: "金融服务", target: "互联网金融服务", type: "resolved", rela:"下位产品"},
      {source: "金融服务", target: "综合金融服务", type: "resolved", rela:"下位产品"}
    ];

最终效果