javascript - D3js 与 google chrome 的兼容性错误

Question

我有这个 d3js 脚本，它应该创建一个词云。 在 Firefox 上一切正常，但在 Google Chrome 上似乎有些东西不起作用。我认为问题出在这里:

attr("transform","translate("+size_width/2+",200)")

var div = document.getElementById("container");

var canvas = document.getElementById("canvas_cloud");

size_height = div.offsetHeight;

size_width  = div.offsetWidth;

console.log(size_width);

function wordCloud(selector) {

    var fill = d3.scale.category20();

    //Construct the word cloud's SVG element

    var svg = d3.select(selector).append("svg")
        .attr("width", size_width)
        .attr("height", 400)
        .attr("transform","translate("+size_width/2+",200)")


    //Draw the word cloud
    function draw(words) {
        var cloud = svg.selectAll("text")
                        .data(words, function(d) { return d.text; })

        //Entering words
        cloud.enter()
            .append("a")
            .attr("xlink:href", function(d){return d.url;})
            .attr("transform", function(d) {
                return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
            })
            .append("text")
            .style("font-family", "Impact")
            .style("fill", function(d, i) { return fill(i); })
            .attr("class","hover-item")
            .attr("text-anchor", "middle")
            .attr('font-size', 1)
            .text(function(d) { return d.text; })
            .style("font-size", function(d) { return d.size + "px"; })

        //Entering and existing words
        cloud
            .transition()
                .duration(1000)
                .style("font-size", function(d) { return d.size + "px"; })
                .attr("transform", function(d) {
                    return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
                })
                .style("fill-opacity", 1);

        //Exiting words
        // cloud.exit()
        //     .transition()
        //         .duration(200)
        //         .style('fill-opacity', 1e-6)
        //         .attr('font-size', 1)
        //         .remove();
    }


    //Use the module pattern to encapsulate the visualisation code. We'll
    // expose only the parts that need to be public.
    return {

        //Recompute the word cloud for a new set of words. This method will
        // asycnhronously call draw when the layout has been computed.
        //The outside world will need to call this function, so make it part
        // of the wordCloud return value.
        update: function(words) {
            d3.layout.cloud().size([size_width, 300])
                .words(words)
                .padding(5)
                .rotate(function() { return ~~(Math.random() * 2) * 5; })
                .font("Impact")
                .fontSize(function(d) { return d.size; })
                .on("end", draw)
                .start();
        }
    }

}

//This method tells the word cloud to redraw with a new set of words.
//In reality the new words would probably come from a server request,
// user input or some other source.
function showNewWords(vis, i) {
    i = i || 0;

    vis.update(words)
}

//Create a new instance of the word cloud visualisation.

  {% load jsonify %}

  var items = '{{ destinations|jsonify }}';
  items = JSON.parse(items);
setTimeout(function(){
    words = items;
    //words.push({ "text":'{{item.name}}',"size":{{item.importance}},"url":'destino-{{item.name}}' });
  var myWordCloud = wordCloud('.canv');
  showNewWords(myWordCloud);
}, 900);

Answer 1

在 SVG 1.1 中，许多元素确实支持转换属性，但 <svg>元素没有。

能够在 <svg> 上设置转换element 是尚未完成的 SVG 2 规范中的新元素。 Firefox 已经实现了 SVG 2 的这一部分，但 Chrome 尚未实现。

您可以创建一个子项 <g>元素并对其进行转换作为解决方法。