R2D3的IE8问题

Question

我一直在使用R2D3来绘制力导向布局。当我在IE8上运行时，我看到 Arg：Vector2D中的非法输入字符串，如下所示：

这适用于我申请布局的转换属性。

node.attr("transform", function(d) {
  return "translate(" + d.x + "," + d.y + ")";
});     

我怀疑translate函数返回了浏览器引擎无法读取的某些值。可能很多。有没有办法在不使用transform 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 + ")";
            });

        }           


});

Answer 1

转换在IE8中不起作用，在IE9中，您需要浏览器前缀ms-

因此，您需要抽象转换调用，或使用CSS中的表达式

http://msdn.microsoft.com/en-us/library/ms532918(v=vs.85).aspx