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:"下位產品"}
    ];

最終效果