我一直在使用 R2D3 来绘制力导向布局。当我在 IE8 上运行它时，我看到Arg: Illegal input string in Vector2D，如下所示：
这发生在我申请布局的变换属性上。
node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
我怀疑 translate 函数会返回一些浏览器引擎无法读取的值。可能数量很大。有什么方法可以在不使用变换属性的情况下定位节点。以下是我的代码：
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 + ")";
});
}
});