API Documentation

Namespace

D3Module

D3Module

module of d3

View Source modules/d3/d3.module.js, line 1

Namespaces

d3GraphChartsUtils
d3Utils

Methods

# static bubbleDragChart(htmlElementContainer, idElement, data, widthopt, heightopt, relativeRadiusopt, backgroundColoropt, onClickFunctionCallbackopt)

function for create a bubble drag chart
Parameters:
Name Type Attributes Default Description
htmlElementContainer HTMLBodyElement container html element, where the chart is inserted
idElement string chart id
data object data to be plotted within the chart, with the structure: [ { id: "A", value: 150, group: 1, properties?: { opacity?: 0.23, border_width?: 5, background_color?: '#000', border_color?: '#523' }, icon?: '.../.../.../.png', description?: 'Text' }, ... ]
width number <optional>
 500 chart width inside the container
height number <optional>
 500 chart height inside the container
relativeRadius number <optional>
 null relative size radius to the circles length
backgroundColor string <optional>
 'white' background color for the chart
onClickFunctionCallback function <optional>
 () => {} function callback to onClick event, with parameter d = node of data or node selected, this node contains attributes of data[index] + attributes of html element
See:

View Source modules/d3/charts/BubbleDrag.chart.js, line 6

Example
D3.bubbleDragChart(
    document.getElementById('charts_container'),
    'bubble_drag_chart',
    [
      {
        id: "A",
        value: 150,
        group: 1,
        properties: {
            opacity: 0.23,
            border_width: 5,
            background_color: '#000',
            border_color: '#523'
        },
        icon: 'assets/img/exito.png',
        description: "Exito movil"
      },
      {
        id: "B",
        value: 20,
        group: 2,
        icon: 'assets/img/claro.png'
      },
      {
        id: "C",
        value: 20,
        group: 3
      },
      {
        id: "D",
        value: 20,
        group: 1
      },
      {
        id: "E",
        value: 20,
        group: 1
      },
              {
        id: "F",
        value: 20,
        group: 3
      },
      {
        id: "G",
        value: 20,
        group: 1
      },
      {
        id: "H",
        value: 20,
        group: 4
      }
   ]
);

# static collapsableTreeChart(htmlElementContainer, idElement, data, widthopt, heightopt, marginopt, backgroundColoropt)

function for create a collapsable tree chart
Parameters:
Name Type Attributes Default Description
htmlElementContainer HTMLBodyElement container html element, where the chart is inserted
idElement string chart id
data object data to be plotted within the chart, with the structure: { name: string, children: array[data] }
width number <optional>
 1050 chart width inside the container
height number <optional>
 300 chart height inside the container
margin Object <optional>
 { top: 10, right: 120, bottom: 10, left: 120 } view box container
backgroundColor string <optional>
 'white' background color for the chart
See:

View Source modules/d3/charts/collapsableTree.chart.js, line 6

Example
D3.collapsableTreeChart(
   document.getElementById('charts'),
   'collapsable_tree_chart',
   {
    name: 'root',
    children: [
      {
        name: 'node_1',
        children: [
          {
            name: 'node_1.1',
            children: [
              {
                name: 'node_1.1.1'
              },
              {
                name: 'node_1.1.2'
              },
              {
                name: 'node_1.1.3'
              }
            ]
          }
        ]
      },
      {
        name: 'node_2',
        children: [
          {
            name: 'node_2.1',
            children: [
              {
                      name: 'node_2.1.1'
              },
              {
                name: 'node_2.1.2'
              },
              {
                name: 'node_2.1.3',
                children: [
                  {
                    name: 'node_2.1.3.1',
                    children: [
                      {
                        name: 'node_2.1.3.1.1'
                      },
                      {
                        name: 'node_2.1.3.1.2'
                      },
                      {
                        name: 'node_2.1.3.1.3'
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            name: 'node_2.2'
          },
          {
            name: 'node_2.3'
          },
        ]
      }
    ]
  }
);

# static directionalGraphChart(htmlElementContainer, idElement, data, showIdsopt, spaceOfLegendopt, nodeFunctionsopt, archesFunctionsopt, widthopt, heightopt, backgroundColoropt)

function for create a graph chart
Parameters:
Name Type Attributes Default Description
htmlElementContainer HTMLBodyElement container html element, where the chart is inserted
idElement string chart id
data object data to be plotted within the chart, with the structure: { nodes: [{ id: string, group: number }], arches: [{ source: string, target: string, type: string, ... }] }
showIds boolean <optional>
 false it'll show id for each node
spaceOfLegend number <optional>
 [] space between legends
nodeFunctions array <optional>
 [] functions of each node within the chart, with the structure: nodeFunctions: [{ event: string // event type, handler: function(node?) // action to take }]
archesFunctions array <optional>
 null functions of each arch within the chart, with the structure: archesFunctions: [{ event: string // event type, handler: function(arch?) // action to take }]
width number <optional>
 500 chart width inside the container
height number <optional>
 500 chart height inside the container
backgroundColor string <optional>
 'white' background color for the chart
See:

View Source modules/d3/charts/directionalGraph.chart.js, line 12

Example
D3.directionalGraphChart(
  document.getElementById('charts'),
  'chart',
  {
    nodes: [
      { id: "Microsoft", group: 1 },
      { id: "Amazon", group: 2 },
      { id: "HTC", group: 1 },
      { id: "Samsung", group: 2 },
      { id: "Apple", group: 1 },
      { id: "Motorola", group: 1 },
      { id: "Nokia", group: 2 },
      { id: "Kodak", group: 2 },
      { id: "Barnes & Noble", group: 4 },
      { id: "Foxconn", group: 1 },
      { id: "Oracle", group: 2 },
      { id: "Google", group: 1 },
      { id: "Inventec", group: 5 },
      { id: "LG", group: 1 },
      { id: "RIM", group: 1 },
      { id: "Sony", group: 3 },
      { id: "Qualcomm", group: 3 },
      { id: "Huawei", group: 3 },
      { id: "ZTE", group: 1 },
      { id: "Ericsson", group: 1 }
    ],
    arches: [
      {
        source: "Microsoft",
        target: "Amazon",
        type: "licensing"
      }, {
        source: "Microsoft",
        target: "HTC",
        type: "licensing"
      }, {
        source: "Samsung",
        target: "Apple",
        type: "suit"
      }, {
        source: "Motorola",
        target: "Apple",
        type: "suit"
      }, {
        source: "Nokia",
        target: "Apple",
        type: "resolved"
      }, {
        source: "HTC",
        target: "Apple",
        type: "suit"
      }, {
        source: "Kodak",
        target: "Apple",
        type: "suit"
      }, {
        source: "Microsoft",
        target: "Barnes & Noble",
        type: "suit"
      }, {
        source: "Microsoft",
        target: "Foxconn",
        type: "suit"
      }, {
        source: "Oracle",
        target: "Google",
        type: "suit"
      }, {
        source: "Apple",
        target: "HTC",
        type: "suit"
      }, {
        source: "Microsoft",
        target: "Inventec",
        type: "suit"
      }, {
        source: "Samsung",
        target: "Kodak",
        type: "resolved"
      }, {
        source: "LG",
        target: "Kodak",
        type: "resolved"
      }, {
        source: "RIM",
        target: "Kodak",
        type: "suit"
      }, {
        source: "Sony",
        target: "LG",
        type: "suit"
      }, {
        source: "Kodak",
        target: "LG",
        type: "resolved"
      }, {
        source: "Apple",
        target: "Nokia",
        type: "resolved"
      }, {
        source: "Qualcomm",
        target: "Nokia",
        type: "resolved"
      }, {
        source: "Apple",
        target: "Motorola",
        type: "suit"
      }, {
        source: "Microsoft",
        target: "Motorola",
        type: "suit"
      }, {
        source: "Motorola",
        target: "Microsoft",
        type: "suit"
      }, {
        source: "Huawei",
        target: "ZTE",
        type: "suit"
      }, {
        source: "Ericsson",
        target: "ZTE",
        type: "suit"
      }, {
        source: "Kodak",
        target: "Samsung",
        type: "resolved"
      }, {
        source: "Apple",
        target: "Samsung",
        type: "suit"
      }, {
        source: "Kodak",
        target: "RIM",
        type: "suit"
      }, {
        source: "Nokia",
        target: "Qualcomm",
        type: "suit"
      }
    ]
  },
  false,
  [
    {
      event: 'click',
      handler: console.log
    }
  ],
  [
    {
      event: 'click',
      handler: console.log
    }
  ]
  );

# static graphChart(htmlElementContainer, idElement, data, nodeFunctionsopt, archesFunctionsopt, widthopt, heightopt, backgroundColoropt)

function for create a graph chart
Parameters:
Name Type Attributes Default Description
htmlElementContainer HTMLBodyElement container html element, where the chart is inserted
idElement string chart id
data object data to be plotted within the chart, with the structure: { nodes: [{ id: string, group: number }], arches: [{ source: string, target: string, value: object, ... }] }
nodeFunctions array <optional>
 [] functions of each node within the chart, with the structure: nodeFunctions: [{ event: string // event type, handler: function(node?) // action to take }]
archesFunctions array <optional>
 [] functions of each arch within the chart, with the structure: archesFunctions: [{ event: string // event type, handler: function(arch?) // action to take }]
width number <optional>
 500 chart width inside the container
height number <optional>
 500 chart height inside the container
backgroundColor string <optional>
 'white' background color for the chart
See:

View Source modules/d3/charts/graph.chart.js, line 12

Example
D3.graphChart(
  document.getElementById('charts'),
  'graph_chart',
  {
     nodes: [
       { id: 'Armenia', group: 1 },
       { id: 'Calarca', group: 1 },
       { id: 'Circasia', group: 1 },
       { id: 'Pereira', group: 2 },
       { id: 'Cali', group: 3 },
       { id: 'Bogota', group: 4 },
       { id: 'Soacha', group: 4 },
       { id: 'Medellin', group: 5 },
       { id: 'Itagui', group: 5 },
       { id: 'Envigado', group: 5 }
     ],
     arches: [
       { source: 'Armenia', target: 'Calarca', value: 5 },
       { source: 'Armenia', target: 'Circasia', value: 5 },
       { source: 'Cali', target: 'Medellin', value: 5 },
       { source: 'Medellin', target: 'Itagui', value: 5 },
       { source: 'Armenia', target: 'Medellin', value: 5 },
       { source: 'Cali', target: 'Bogota', value: 5 },
       { source: 'Bogota', target: 'Soacha', value: 5 },
       { source: 'Armenia', target: 'Bogota', value: 5 },
       { source: 'Medellin', target: 'Envigado', value: 5 },
       { source: 'Armenia', target: 'Pereira', value: 5 }
     ]
   }
);