google chrome 的 D3js 兼容性错误
D3js compatibility error with google chrome
我有这个 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);
在 SVG 1.1 中,许多元素支持 transform 属性,但 <svg>
元素不支持。
在 <svg>
元素上设置变换的功能是 as-yet-unfinished SVG 2 规范中的新增功能。 Firefox 已经实现了 SVG 2 的那一部分,但是 Chrome 还没有这样做。
您可以创建一个子 <g>
元素并将转换放在该元素上作为解决方法。
我有这个 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);
在 SVG 1.1 中,许多元素支持 transform 属性,但 <svg>
元素不支持。
在 <svg>
元素上设置变换的功能是 as-yet-unfinished SVG 2 规范中的新增功能。 Firefox 已经实现了 SVG 2 的那一部分,但是 Chrome 还没有这样做。
您可以创建一个子 <g>
元素并将转换放在该元素上作为解决方法。