Question

我有以下功能，可以在画布上使用Dracula js创建图形。

var populateGraphEntities = function(element) {

  var filteredQuery = [];
  if(query != 'query6') {
    for(var k in query) {
      if(new Date(query[k].date) > startingDate && new Date(query[k].date) < endingDate) {
        var regions = [];
        for(var j in query[k].entities) {
          if(query[k].entities[j].type == 'Location') {
            if(query[k].entities[j].code) {
              regions.push(query[k].entities[j].code);
            }
          }
        }
        var common = $.grep(selectedRegions, function(element) {
            return $.inArray(element, regions) !== -1;
        });
        if(common.length != 0) {
          filteredQuery.push(query[k]);
        }
      }
    }
  }

  var dimensionX = 120;
  var dimensionY = 60;

  var renderEntity = function(r, n) {
    var popUp;
    var set = r.set().push(
    r.rect(n.point[0], n.point[1], dimensionX, dimensionY).click(function () {console.log(this.data("i"));}).attr({
      "fill": '#A0302D',
      "stroke-width": 2,
      r: "9px"
    })).push(r.text(n.point[0]+(dimensionX/2), n.point[1]+(dimensionY/2), n.label).attr({
      "font-size": "12px"
    }));
    set.hover(
      function mouseIn() {
        graphEntitiesVariable='IN';
      },
      function mouseOut() {
        graphEntitiesVariable='OUT';
      }
    );
    return set;
  };

  var renderPerson = function(r, n) {
    var set = r.set().push(
    r.rect(n.point[0], n.point[1], dimensionX, dimensionY).click(function () {console.log(this.data("i"));}).attr({
      "fill": '#2E9DB2',
      "stroke-width": 2,
      r: "9px"
    })).push(r.text(n.point[0]+(dimensionX/2), n.point[1]+(dimensionY/2), n.label).attr({
      "font-size": "12px"
    }));
    return set;
  };

  var renderEvent = function(r, n) {
    var set = r.set().push(
    r.rect(n.point[0], n.point[1], dimensionX, dimensionY).click(function () {console.log(this.data("i"));}).attr({
      "fill": '#D6D825',
      "stroke-width": 2,
      r: "9px"
    })).push(r.text(n.point[0]+(dimensionX/2), n.point[1]+(dimensionY/2), n.label).attr({
      "font-size": "12px"
    }));
    set.click(
      function onClick() {
        console.log('click');
      }
    );
    return set;
  };

  var renderOrganization = function(r, n) {
    var set = r.set().push(
    r.rect(n.point[0], n.point[1], dimensionX, dimensionY).click(function () {console.log(this.data("i"));}).attr({
      "fill": '#B9C5B4',
      "stroke-width": 2,
      r: "9px"
    })).push(r.text(n.point[0]+(dimensionX/2), n.point[1]+(dimensionY/2), n.label).attr({
      "font-size": "12px"
    }));
    return set;
  };

  var renderLocation = function(r, n) {
    var set = r.set().push(
    r.rect(n.point[0], n.point[1], dimensionX, dimensionY).click(function () {console.log(this.data("i"));}).attr({
      "fill": '#66CD00',
      "stroke-width": 2,
      r: "9px"
    })).push(r.text(n.point[0]+(dimensionX/2), n.point[1]+(dimensionY/2), n.label).attr({
      "font-size": "12px"
    }));
    return set;
  };

  var leftMainContent = document.getElementById("left-main-content");
  var graph = '<div style="background-color: #F9F9F9" id="canvas"></div>';
  leftMainContent.innerHTML = '';
  leftMainContent.innerHTML = graph;

  var g = new Graph();
  g.addNode('Entity', {label: 'Entity', render: renderEntity});

  for(var k=0; k<filteredQuery.length; k++) {
    for(var j=0; j<filteredQuery[k].entities.length; j++) {
      if(filteredQuery[k].entities[j].type == 'Person') {
        g.addNode('Person', {label: 'Person', render: renderPerson});
        g.addEdge('Entity', 'Person', { stroke : "#bfa" , fill : "#56f", label : "is-a"});
        g.addNode(filteredQuery[k].entities[j].name, {label: filteredQuery[k].entities[j].name, render: renderPerson});
        g.addEdge('Person', filteredQuery[k].entities[j].name, { stroke : "#bfa" , fill : "#56f", label : "is-a"});
      }
      else if(filteredQuery[k].entities[j].type == 'Location') {
        if(filteredQuery[k].entities[j].partof) {
          g.addNode(filteredQuery[k].entities[j].name, {label: filteredQuery[k].entities[j].name, render: renderLocation});
          g.addNode(filteredQuery[k].entities[j].partof, {label: filteredQuery[k].entities[j].partof, render: renderLocation});
          g.addEdge(filteredQuery[k].entities[j].name, filteredQuery[k].entities[j].partof, { stroke : "#bfa" , fill : "red", label : "part-of"});
        }
        else {
          g.addNode('Location', {label: 'Location', render: renderLocation});
          g.addEdge('Entity', 'Location', { stroke : "#bfa" , fill : "#56f", label : "is-a"});
          g.addNode(filteredQuery[k].entities[j].name, {label: filteredQuery[k].entities[j].name, render: renderLocation});
          g.addEdge('Location', filteredQuery[k].entities[j].name, { stroke : "#bfa" , fill : "#56f", label : "is-a"});
        }          
      }
      else if(filteredQuery[k].entities[j].type == 'Event') {
        g.addNode('Event', {label: 'Event', render: renderEvent});
        g.addEdge('Entity', 'Event', { stroke : "#bfa" , fill : "#56f", label : "is-a"});
        g.addNode(filteredQuery[k].entities[j].name, {label: filteredQuery[k].entities[j].name, render: renderEvent});
        g.addEdge('Event', filteredQuery[k].entities[j].name, { stroke : "#bfa" , fill : "#56f", label : "is-a"});
      }
      else if(filteredQuery[k].entities[j].type == 'Organization') {
        g.addNode('Organization', {label: 'Organization', render: renderOrganization});
        g.addEdge('Entity', 'Organization', { stroke : "#bfa" , fill : "#56f", label : "is-a"});
        g.addNode(filteredQuery[k].entities[j].name, {label: filteredQuery[k].entities[j].name, render: renderOrganization});
        g.addEdge('Organization', filteredQuery[k].entities[j].name, { stroke : "#bfa" , fill : "#56f", label : "is-a"});
      }
    }
  }

  var layouter = new Graph.Layout.Spring(g);
  layouter.layout();
  var renderer = new Graph.Renderer.Raphael('canvas', g, 930, 475);
  renderer.draw();
}

我创建了自定义渲染器以成功处理鼠标输入/输出事件，但我无法找到onclick事件的任何位置。如何处理节点上的点击？

谢谢

Answer 1

您好我正在使用：

var set = r.set().push(
r.rect(n.point[0]-w*6/2, n.point[1]-13, w*6, 20).attr({"fill": "#eeeeee", r : "12px", "stroke-width" : n.distance == 0 ? "3px" : "1px" })).push(
r.text(n.point[0], n.point[1], n.label ).click(function () {
    toogleTable(n.id);
}));

点击事件的Dracula Graph js节点

1 个答案: