서버 제공 JSON을 통한 Javascript의 기능

Question

D3의 힘 그래프를 사용하여 데이터 기반 디스플레이를 만들고 있습니다.

나는 ajax를 통해 서버 데이터에서 노드와 링크를 제공한다.

D3 Force Layout 모델에는 기능을 통해 링크 거리를 설정할 수있는 기능이 있습니다. 이 함수를 데이터베이스에 저장하거나 서버 측에서 생성해야합니다.

다음은 간단한 예입니다.

 force 
      .gravity(json_data.gravity || 0.15) 
      .charge(-150 + json_data.nodes.length) 
      .nodes(json_data.nodes) 
      .links(json_data.links) 
      .linkDistance(function (link, index) { 
       if (index % 2) 
        return 30; 
       return 50; 
      }) 
      .start(); 

charge 및 linkDistance와 같은 필드의 경우 서버 측에서 완료해야합니다.

이것을 달성하는 가장 좋은 방법은 무엇입니까? Eval이 해결할 수있는 부분이 있다는 것을 이해하지만 대부분의 소식은 피하지 말라고 말합니다 ..

생각 하시겠습니까?

편집 :

이 내가

"function (link, index) { if (index % 2) return 30; return 50;" 

"function (link, index) { if (index % 3 ==1) return 30; if (index % 3==2) return 40; return 50;" 

를 저장하려고 무엇을 내가 그것을했다 어디 여기.

서버 측 :

public JsonGraphDTO(int Id, UnitRepository repository) { 
     gravity = 0.15; 
     linkDistance = "return 40;"; 
     ... 

클라이언트 측의 처리 :

당신은 다른 기능에 링크 할 수 있도록하려면

 var fn = new Function('lnk','index',json_data.linkDistance); 
     force 
      .gravity(json_data.gravity || 0.15) 
      .charge(-150 + json_data.nodes.length) 
      .nodes(json_data.nodes) 
      .links(json_data.links) 
      .linkDistance(fn) 
      .start(); 

Answer 1

, 그 이름을 지정합니다.

function linkDistance1 (link, index) { if (index % 2) return 30; return 50; } 
function linkDistance2 (link, index) { if (index % 3 ==1) return 30; if (index % 3==2) return 40; return 50; } 

그들을

force 
     .gravity(json_data.gravity || 0.15) 
     .charge(-150 + json_data.nodes.length) 
     .nodes(json_data.nodes) 
     .links(json_data.links) 
     .linkDistance(linkDistance1) 
     .start(); 

당신은 배열

var linkDistanceFunctions = [ 
    function (link, index) { if (index % 2) return 30; return 50; }, 
    function (link, index) { if (index % 3 ==1) return 30; if (index % 3==2) return 40; return 50; } 
]; 

또는 객체

var linkDistanceFunctions = { 
    "foo" : function (link, index) { if (index % 2) return 30; return 50; }, 
    "bar" : function (link, index) { if (index % 3 ==1) return 30; if (index % 3==2) return 40; return 50; } 
}; 

로 할 수 참조 당신은 당신이 동적으로로드 할 말했다 스크립트 태그를 통해로드하십시오.

window["myCallBack"] = function(myArrayOfFunctions){ 
    console.log(myArrayOfFunctions); 
}; 
var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.src= 'myServerSidePage.php?callback=myCallBack'; 
head.appendChild(script); 

그리고 서버에 당신은 다시 내가 배열을 사용하여 다시 호출

myCallBack([ 
    function (link, index) { if (index % 2) return 30; return 50; }, 
    function (link, index) { if (index % 3 ==1) return 30; if (index % 3==2) return 40; return 50; } 
]); 

와 기능을 반환 당신이 원한다면, 당신은 객체하거나 기능을 다시 보낼 수 있습니다.