0
나는 강제 지시 레이아웃을 그리기 위해 R2D3를 사용 해왔다. 내가 IE8에서 실행하면 내가 의 Arg를 참조하십시오 Vector2D의 잘못된 입력 문자열을 아래와 같이 : 이것은 내가 레이아웃을 신청 속성을 변환하기위한 일IE8 Issue with R2D3
합니다.
node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
translate 함수가 브라우저 엔진이 읽을 수없는 값을 반환하는 것 같습니다. 가능한 많은 숫자. 변환 attr을 사용하지 않고 노드를 배치 할 수있는 방법이 있습니까? 다음은 내 코드입니다 :
d3.json("egoGraph.json", function(json) {
nodeSet = json.nodes;
linkSet = json.links;
var width = 600;
var height = 500;
var centerNodeSize = 30;
var nodeSize = 10;
var rscale = d3.scale.linear().domain([0, d3.max(nodeSet, function (d) {
return d.data
})]).range([5, 20]);
var color = ['#B43104','#F5ECCE', '#F3E2A9', '#F7D358', '#FFBF00', '#FF8000'];
// Create a canvas...
var svgCanvas = d3.select('#chart').append("svg:svg").attr(
"width", width).attr("height", height).append("svg:g")
.attr("class", "focalNodeCanvas").attr("transform",
"translate(" + width/3.333333 + "," + height/2.352 + ")")
var node_hash = [];
//var type_hash = [];
// Create a hash that allows access to each node by its id
nodeSet.forEach(function(d, i) {
node_hash[d.journalname] = d;
//type_hash[d.type] = d.type;
});
// Append the source object node and the target object node to each link records...
linkSet.forEach(function(d, i) {
d.source = node_hash[d.sourceId];
d.target = node_hash[d.targetId];
if (d.sourceId == focalNodeID) {
d.direction = "OUT";
} else {
d.direction = "IN";
}
});
// Create a force layout and bind Nodes and Links
var force = d3.layout.force().nodes(nodeSet).links(linkSet).charge(
-1000)
//.gravity(.2)
//.linkStrength(20)
.size([ width/8, height/10 ]).linkDistance(function(d) {
if (width < height) {
return width * 1/3;
} else {
return height * 1/3
}
}) // Controls edge length
.on("tick", tick).start();
// Draw lines for Links between Nodes
var link = svgCanvas.selectAll(".gLink").data(force.links())
.enter().append("g").attr("class", "gLink").append("line")
.attr("class", "link").attr("stroke-width", function(d) {
return (Math.random() * (10 - 1) + 1);
}).style("stroke", "#808080").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;
});
// Create Nodes
var node = svgCanvas.selectAll(".node").data(force.nodes()).enter()
.append("g").attr("class", "node").attr("fixed", function(d) {
return true
}).call(force.drag);
// Append circles to Nodes
node.append("circle").attr("x", function(d) {
return 100;
}).attr("y", function(d) {
return 30;
}).attr("r", function(d) {
if (d.journalname == focalNodeID) {
return centerNodeSize;
} else {
return rscale(d.data);
}
}) // Node radius
.style("fill", function(d) { return color[Math.floor(Math.random() * (5 - 0 + 1)) + 0]; }) // Make the nodes hollow looking
.on("mouseover", function() { d3.select(this).attr("stroke", "#808080").attr("stroke-width", 5);})
.on("mouseout", function(){ d3.select(this).attr("stroke", function(d) { return color[Math.floor(Math.random() * (5 - 0 + 1)) + 0]; }).attr("stroke-width", 0);})
.call(force.drag);
// Append text to Nodes
node.append("text").attr("x", function(d) {
if (d.journalname == focalNodeID) {
return 0;
} else {
return 20;
}
}).attr("y", function(d) {
if (d.journalname == focalNodeID) {
return 0;
} else {
return -10;
}
}).attr("text-anchor", function(d) {
return "middle";
}).attr("font-family", "Arial, Helvetica, sans-serif").style(
"font", "normal 12px Arial").text(function(d) {
return d.journalname;
});
function tick() {
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 + ")";
});
}
});