如何在Apex中為D3力導向圖添加動態圖例？

Question

我在Apex中建立了一個D3力圖，基本上就像http://bl.ocks.org/mbostock/1093130或http://bl.ocks.org/mbostock/4062045 。 不同之處在於，我從數據庫的地址表中使用Application Process提取數據。 它工作得很好。

節點的顏色由地址類型定義（如聯系人，付款辦公室，許可證持有者......）。 現在我想在頁面的側面添加一個圖例，其中包含圖表使用的不同顏色和連接的地址類型。

我是在CSS內聯部分的頁面屬性中執行此操作，還是必須在D3圖形JavaScript代碼中添加內容。

這是我的代碼：

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 + ")"; });

  });

};

我希望我能夠很好地解釋它，讓你理解它。

Answer 1

猜猜看，我剛剛解決了我自己的問題:)

我在function showChart2()的末尾的頁面屬性的JavaScript部分添加了一個代碼，但仍然在其中。

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; });

這是完整的工作代碼：

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; });

};

我從沒想過我能回答我自己的問題，但它確實有效;）

我希望它也有助於其他人......