게시판 즐겨찾기
편집
드래그 앤 드롭으로
즐겨찾기 아이콘 위치 수정이 가능합니다.
d3.js에서 node좌표값이 NaN이 됩니다
게시물ID : programmer_18454짧은주소 복사하기
작성자 : 빵미인아
추천 : 0
조회수 : 499회
댓글수 : 1개
등록시간 : 2016/09/19 14:40:35
옵션
  • 본인삭제금지
function Updater(obj)
{
var dotidx, endidx, filename, file_id, data;

/* 문장이 속한 파일명, 아이디 추출 */
dotidx = obj.lastIndexOf('.');
endidx = obj.length;
filename = obj.substring(0, dotidx);
file_id = obj.substring(dotidx+1, endidx);

/* 저장된 데이터에서 filename 파일의 데이터 불러오기 */
for(var i=0; i<jsonData.length; i++)
{
if(jsonData[i].filename == filename)
data = jsonData[i].data;
}

/* 문장 성분 분석 */
var isVerb;
var subject = "";
var tab_name;
var tmpIdx;
var newTab = false;

$(data.sentence).each(function(pindex, pvalue){
if(pvalue.id == file_id)
{
$(pvalue.SRL).each(function(index, value){
//현재 탐지된 단어가 동사인지 확인
isVerb = false
$(pvalue.dependency).each(function(i, v){
if(v.id == value.word_id && v.label == "VP")
{
isVerb = true;
}
});

//동사가 맞을 경우
if(isVerb)
{
//동사를 뒷받침하는 단어들 분석
var obj = [];
$(value.argument).each(function(i, v){
//동사의 주어에 해당하는 단어일 경우
if(v.type == "ARG0")
{
if(v.text.indexOf("Apple") != -1)
{
subject = "Apple";
}
else if(v.text.indexOf("Blue") != -1)
{
subject = "Blue";
}
else if(v.text.indexOf("Cap") != -1)
{
subject = "Cap";
}
}
else if(v.type == "ARG1")
{
obj.push(v.text);
}
});
//기존에 존재하는 탭의 주어와 현재 문장의 주어를 비교
if(subject == "")
{
console.log("주어 없음!!");
}
else
{
for(var i=0; i < tmpData.length; i++)
{
if(tmpData[i].tab_name == subject)
{
tmpIdx = i;
break;
}
else if(i == tmpData.length-1)
{
//새로운 탭 정보 저장
tmpIdx = i+1;
tmpData.push({tab_name: "", tab_Number: 0, groupNum: 0, nodes: [], edges: []});
tmpData[tmpIdx].tab_name = subject;
tmpData[tmpIdx].groupNum++;
tmpData[tmpIdx].nodes.push({name: "", group: 0, id: 0, type: "subject"});
tmpData[tmpIdx].nodes[0].name = subject;
newTab = true;
tab_name = subject;
}
}

var newobj = [];
for(var i=0; i<obj.length; i++)
{
newobj[i] = "new";
}

//기존의 노드들과 현재 동사 비교
var verbIdx, verb, verbGroup;
var end = tmpData[tmpIdx].nodes.length;
for(var i=0; i<end; i++)
{
if( (tmpData[tmpIdx].nodes[i].type == "verb") && (tmpData[tmpIdx].nodes[i].name.indexOf(value.verb) != -1) )
{
console.log("동사 동일");
verbIdx = i;
verbGroup = tmpData[tmpIdx].nodes[i].group;

//목적어 존재 여부 확인
for(var k=0; k<tmpData[tmpIdx].nodes.length; k++)
{
console.log("k는 "+k);
if(tmpData[tmpIdx].nodes[k].type == "object")
{
for(var j=0; j<obj.length; j++)
{
console.log("j는 "+j);
if(tmpData[tmpIdx].nodes[k].name == obj[j])
{
newobj[j] = "old";
break;
}
}
}
}
for(var k=0; k<newobj.length; k++)
{
//새로운 목적어들만 새 노드로 추가
/*if(newobj[k] == "new")
{*/
tmpData[tmpIdx].nodes.push({name: "", group: 0, id: 0, type: "object"});
tmpData[tmpIdx].nodes[tmpData[tmpIdx].nodes.length-1].name = obj[k];
tmpData[tmpIdx].nodes[tmpData[tmpIdx].nodes.length-1].group = verbGroup;
tmpData[tmpIdx].nodes[tmpData[tmpIdx].nodes.length-1].id = tmpData[tmpIdx].nodes.length-1;

tmpData[tmpIdx].edges.push({source: 0, target: 0});
tmpData[tmpIdx].edges[tmpData[tmpIdx].edges.length-1].source = verbIdx
tmpData[tmpIdx].edges[tmpData[tmpIdx].edges.length-1].target = tmpData[tmpIdx].nodes.length-1;

console.log(tmpData[tmpIdx].nodes[tmpData[tmpIdx].nodes.length-1]);
// }
}
break;
}
else if(i == tmpData[tmpIdx].nodes.length-1)
{
//새로운 동사노드 추가
verbIdx = i + 1;
$(pvalue.dependency).each(function(i, v){
if(v.id == value.word_id)
verb = v.text;
});
tmpData[tmpIdx].nodes.push({name: "", group: 0, id: 0, type: "verb"});
tmpData[tmpIdx].nodes[verbIdx].name = verb;
tmpData[tmpIdx].nodes[verbIdx].group = tmpData[tmpIdx].groupNum++;
tmpData[tmpIdx].nodes[verbIdx].id = verbIdx;
verbGroup = tmpData[tmpIdx].nodes[verbIdx].group;

tmpData[tmpIdx].edges.push({source: 0, target: 0});
tmpData[tmpIdx].edges[tmpData[tmpIdx].edges.length-1].target = verbIdx;

//목적어 노드 추가
for(var k=0; k<newobj.length; k++)
{
tmpData[tmpIdx].nodes.push({name: "", group: 0, id: 0, type: "object"});
tmpData[tmpIdx].nodes[tmpData[tmpIdx].nodes.length-1].name = obj[k];
tmpData[tmpIdx].nodes[tmpData[tmpIdx].nodes.length-1].group = verbGroup;
tmpData[tmpIdx].nodes[tmpData[tmpIdx].nodes.length-1].id = tmpData[tmpIdx].nodes.length-1;

tmpData[tmpIdx].edges.push({source: 0, target: 0});
tmpData[tmpIdx].edges[tmpData[tmpIdx].edges.length-1].source = verbIdx
tmpData[tmpIdx].edges[tmpData[tmpIdx].edges.length-1].target = tmpData[tmpIdx].nodes.length-1;

console.log(tmpData[tmpIdx].nodes[tmpData[tmpIdx].nodes.length-1]);
}
}
}
}
//isVerb = false;
}
else
{
console.log("동사 없음!!!");
}
});

if(subject != "" && isVerb)
{
/* 탭 추가 */
var tabNum, svg;

//새 탭 추가
if(newTab)
{
console.log("탭추가");
tabNum = ++tab_Num;
tmpData[tmpIdx].tab_Number = tabNum;

$("#tab").append('<span id="temp_tab" onclick="Tab(this.id, this);" style="padding: 0pt 5px; cursor: pointer;"><text>' + tab_name + '</text></span>');
var temp;
temp = document.getElementById("temp_tab");
temp.id = tabNum;
temp.name = tab_name;

w = 1420;
h = 883;
svg = d3.select("#graph")
.append("svg")
.attr("width", w)
.attr("height", h)
.attr("id", "cont_" + tabNum)
.attr("display", "none");

newTab = false;
isVerb = false;
}
else
{
tabNum = tmpData[tmpIdx].tab_Number;

var deleteTab = document.getElementById("cont_" + tabNum);
$(deleteTab).remove();

w = 1420;
h = 883;
svg = d3.select("#graph")
.append("svg")
.attr("width", w)
.attr("height", h)
.attr("id", "cont_" + tabNum)
.attr("display", "block");
}

console.log(tmpData[tmpIdx]);

/* 그래프 그리기 */
console.log(tmpData[tmpIdx].nodes);
var force = d3.layout.force()
.nodes(tmpData[tmpIdx].nodes)
.links(tmpData[tmpIdx].edges)
.size([w, h])
.linkDistance([150])
.charge([-1200])
.gravity(.07)
.start();

var colors = d3.scale.category20();

//Create edges as lines
var edges = svg.selectAll("line")
.data(tmpData[tmpIdx].edges)
.enter()
.append("line")
.style("stroke", "#ccc")
.style("stroke-width", 2);

//Create nodes as circles
var nodes = svg.selectAll("circle")
.data(tmpData[tmpIdx].nodes)
.enter()
.append("circle")
.attr("r", 40)
.style("fill", function(d, i) {
return colors(d.group);
})
.call(force.drag);

var text = svg.selectAll("text")
.data(tmpData[tmpIdx].nodes)
.enter()
.append("text")
.text(function(d){ return d.name });

//Every time the simulation "ticks", this will be called
force.on("tick", function() {
edges.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; });

nodes.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });

text.attr("x", function(d) { return d.x })
.attr("y", function(d) { return d.y })
.attr("text-anchor", "middle");
});
}
console.log(file_id);
}
});
}


이게 코드인데 여기서 node의 좌표값이 전부 NaN으로 설정되는 노드도 있네요..
왜그런거죠?
전체 추천리스트 보기
새로운 댓글이 없습니다.
새로운 댓글 확인하기
글쓰기
◀뒤로가기
PC버전
맨위로▲
공지 운영 자료창고 청소년보호