How to add a dynamic legend to a D3 force directed graph in Apex?

Sara

I built in Apex a D3 force graph basically like http://bl.ocks.org/mbostock/1093130 or http://bl.ocks.org/mbostock/4062045. The difference is, that I pull my data with an Application Process from a address table from the database. It works just fine.

enter image description here

The colors of the nodes are defined by the address type (like Contact, Payment Office, Licensees, ...). Now I want to add a legend on the side of the page with the different colors the graph is using and the connected address type.

Do I do that in the Page Attributes in the CSS Inline Part, or do I have to add something in the D3 graph JavaScript code.

Here is my code:

var graph;

function get_chart_data() {
var get = new htmldb_Get(null,$v('pFlowId'),'APPLICATION_PROCESS=AddressData',$v('pFlowStepId'));  
var data_all = get.get(); 
var obj = eval ("(" + data_all + ")"); 
return obj;
}


function showChart2() {

graph = get_chart_data();

var width = 1000,
    height = 800;

var color = d3.scale.category20();

var force = d3.layout.force()
    .gravity(0)
    .charge(-400)
    .linkDistance(90)
    .size([width, height]);


var svg = d3.select("#chart2").append("svg")
    .attr("width", width)
    .attr("height", height);

var nodeById = d3.map();

    graph.nodes.forEach(function(node) {
    nodeById.set(node.id, node);
  });

  graph.links.forEach(function(link) {
    link.source = nodeById.get(link.source);
    link.target = nodeById.get(link.target);
  });

    force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

  var link = svg.selectAll(".link")
      .data(graph.links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });

  var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("g")
      .attr("class", "node")
      .call(force.drag);

  node.append("circle")
      .attr("r", 8)
      .style("fill", function(d) { return color(d.type); })

  node.append("text")
      .attr("x", 12)
      .attr("dy", ".35em")
      .text(function(d) { return d.first_name; });

  force.on("tick", function() {
    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

  });

};

I hope I explained it well enough for you to understand it.

Sara

Guess what, I just solved my own question :)

I added a code in the JavaScript part of the Page Attributes at the end of the function showChart2(), but still in it.

var legend = svg.selectAll(".legend")
    .data(color.domain())
    .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

legend.append("rect")
    .attr("x", width - 18)
    .attr("width", 18)
    .attr("height", 18)
    .style("fill", color);

legend.append("text")
    .attr("x", width - 24)
    .attr("y", 9)
    .attr("dy", ".35em")
    .style("text-anchor", "end")
    .text(function(d) { return d; });

And here is the full working code:

var graph;

function get_chart_data() {
var get = new htmldb_Get(null,$v('pFlowId'),'APPLICATION_PROCESS=AddressData',$v('pFlowStepId'));  
var data_all = get.get(); 
var obj = eval ("(" + data_all + ")"); 
return obj;
}


function showChart2() {

graph = get_chart_data();

var width = 1000,
    height = 800;

var color = d3.scale.category20();

var force = d3.layout.force()
    .gravity(0)
    .charge(-400)
    .linkDistance(90)
    .size([width, height]);


var svg = d3.select("#chart2").append("svg")
    .attr("width", width)
    .attr("height", height);

var nodeById = d3.map();

    graph.nodes.forEach(function(node) {
    nodeById.set(node.id, node);
  });

  graph.links.forEach(function(link) {
    link.source = nodeById.get(link.source);
    link.target = nodeById.get(link.target);
  });

    force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

  var link = svg.selectAll(".link")
      .data(graph.links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });

  var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("g")
      .attr("class", "node")
      .call(force.drag);

  node.append("circle")
      .attr("r", 8)
      .style("fill", function(d) { return color(d.type); })

  node.append("text")
      .attr("x", 12)
      .attr("dy", ".35em")
      .text(function(d) { return d.first_name; });

  force.on("tick", function() {
    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

  });
var legend = svg.selectAll(".legend")
    .data(color.domain())
    .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

legend.append("rect")
    .attr("x", width - 18)
    .attr("width", 18)
    .attr("height", 18)
    .style("fill", color);

legend.append("text")
    .attr("x", width - 24)
    .attr("y", 9)
    .attr("dy", ".35em")
    .style("text-anchor", "end")
    .text(function(d) { return d; });

};

I never thought I could answer my own question, but it works ;)

I hope it helps somebody else too...

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

D3 force directed graph direction

From Dev

Introducing Arrow(directed), in Force Directed Graph d3

From Dev

d3 force directed graph downward force simulation

From Dev

D3 force directed graph: Performance issue in a complex graph

From Dev

How to draw a simple Force-directed graph in D3 Javascript

From Dev

How to restrict number of nodes initially in d3 Force directed graph

From Dev

How to render links as elbow connectors in d3 force directed graph

From Dev

How to make it so D3 Force Directed Graph generates nodes in same position each time

From Dev

How to choose which JSON file to use in your D3 force directed graph

From Dev

How do I zoom in on my force-directed graph in d3?

From Dev

How to add text in the center of node in force directed graph?

From Dev

Force-directed graph: How to add icon in the middle of an edge?

From Dev

how to adjust size of force directed graph in d3.js?

From Dev

"Pinning" nodes in a D3 force-directed graph

From Dev

Adding label to the links in D3 force directed graph

From Dev

d3 force directed graph remove text cursor

From Dev

d3 force directed graph don't select text

From Dev

semantic zooming of the force directed graph in d3

From Dev

modifying the d3 force-directed graph example

From Dev

d3 force directed graph, links not being drawn

From Dev

D3 force directed graph moving text

From Dev

D3 Force Directed Graph ajax update

From Dev

D3 force-directed graph: update node position

From Dev

modifying the d3 force-directed graph example

From Dev

Load JSON object into D3 Force Directed Graph

From Dev

Dynamically change color of D3 Node (force directed graph)

From Dev

How to show the tooltip on d3 force directed layout node?

From Dev

How to show the tooltip on d3 force directed layout node?

From Dev

How do i add two different shapes to D3 forced directed graph based on shape field value?

Related Related

  1. 1

    D3 force directed graph direction

  2. 2

    Introducing Arrow(directed), in Force Directed Graph d3

  3. 3

    d3 force directed graph downward force simulation

  4. 4

    D3 force directed graph: Performance issue in a complex graph

  5. 5

    How to draw a simple Force-directed graph in D3 Javascript

  6. 6

    How to restrict number of nodes initially in d3 Force directed graph

  7. 7

    How to render links as elbow connectors in d3 force directed graph

  8. 8

    How to make it so D3 Force Directed Graph generates nodes in same position each time

  9. 9

    How to choose which JSON file to use in your D3 force directed graph

  10. 10

    How do I zoom in on my force-directed graph in d3?

  11. 11

    How to add text in the center of node in force directed graph?

  12. 12

    Force-directed graph: How to add icon in the middle of an edge?

  13. 13

    how to adjust size of force directed graph in d3.js?

  14. 14

    "Pinning" nodes in a D3 force-directed graph

  15. 15

    Adding label to the links in D3 force directed graph

  16. 16

    d3 force directed graph remove text cursor

  17. 17

    d3 force directed graph don't select text

  18. 18

    semantic zooming of the force directed graph in d3

  19. 19

    modifying the d3 force-directed graph example

  20. 20

    d3 force directed graph, links not being drawn

  21. 21

    D3 force directed graph moving text

  22. 22

    D3 Force Directed Graph ajax update

  23. 23

    D3 force-directed graph: update node position

  24. 24

    modifying the d3 force-directed graph example

  25. 25

    Load JSON object into D3 Force Directed Graph

  26. 26

    Dynamically change color of D3 Node (force directed graph)

  27. 27

    How to show the tooltip on d3 force directed layout node?

  28. 28

    How to show the tooltip on d3 force directed layout node?

  29. 29

    How do i add two different shapes to D3 forced directed graph based on shape field value?

HotTag

Archive