d3.js可视化在Android 2.3 [英] d3.js visualization on android 2.3
本文介绍了d3.js可视化在Android 2.3的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我知道2.3的Android浏览器不支持SVG，但我想知道是否可以使用 Canvg 。是浏览器能够解析SVG元素，还是从SVG到Canvas的这种转换需要发生在服务器端？提前感谢！
I know that the android browser for 2.3 does not support SVG, but I'd like to know whether I could convert a d3.js SVG Visualization to a canvas using Canvg on clientside. Is the browser able to parse SVG elements at all, or would this transformation from SVG to Canvas need to happen server side? Thanks in advance!
// Grab data from server...
var btoken = window.location.search.split( 'bearer_token=')[1].split('&')[0];
var endpoint = "http://dcaps-staging.media.mit.edu:8080/api/reality_analysis_service/get_reality_analysis_data?document_key=radialData&bearer_token=" + btoken;
console.log(endpoint);
d3.json(endpoint, function(json){
console.log(json);
var data = json.radialData.data;
var csvdata;
csvdata = data;
//var data
var output_ = '';
for( property in data) {
output_ += property +':' + data[property]+';';
}
console.log(output_);
var meta = json.radialData.meta;
var capitalMeta = [];
for (i = 0; i < meta.length; i++){
capitalMeta.push(capitaliseFirstLetter(meta[i]));
}
console.log(window.innerWidth, window.innerHeight )
//var width = 335,
// height = 340,
var width = window.innerWidth - 5,
height = window.innerHeight - (window.innerHeight * .35),
outerRadius = height / 2 - 10,
innerRadius = 120;
var angle = d3.scale.linear()
.range([0, 2 * Math.PI]);
var radius = d3.scale.linear()
.range([0, outerRadius]);
var z = d3.scale.category20();
var whiteColor = d3.rgb(255,255,255);
var redColor = d3.rgb(200,100,50);
var newColor = d3.rgb(100,100,100);
var pink = d3.rgb(238,98,226);
var stack = d3.layout.stack()
.offset("zero")//.offset(function(d) { return d.y0; })
.values(function(d) { return d.values; })
.x(function(d, i) { return i; })
.y(function(d) { return d.value; });
var replaceY0 = 0;
var nest = d3.nest()
.key(function(d) { return d.layer; });
var line = d3.svg.line.radial()
.interpolate("cardinal-closed")
.angle(function(d,i) { return angle(i); })
.radius(function(d) { return radius(replaceY0 + d.y); });
var lowestValues = [];
// parse response for lowest values
for (i = 0; i < csvdata.length; i++){
if (csvdata[i].layer == "averageLow"){
lowestValues.push(csvdata[i].value);
}
}
var area = d3.svg.area.radial()
.interpolate("cardinal-closed")
.angle(function(d, i) { return angle(i); })
//.innerRadius(function(d) { return radius(replaceY0); })
.innerRadius(function(d, i) {
if (d.layer == "User"){ // Hardcoded check right now, might change later...data tag must have USER in it...
return radius(d.y);
}
else{
return radius(lowestValues[i]);
}
})
.outerRadius(function(d) { return radius(replaceY0 + d.y); });
var heightPadding = 20;
var widthPadding = 2;
var svg = d3.select("#radial_chart").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + ((width / 2) + widthPadding) + "," + ((height / 2) + heightPadding) + ")");
//console.log("data : ", data);
//console.log("svg : ", svg);
var output_SVG = '';
for( property in svg[0][0]) {
output_SVG += property +':' + data[property]+';';
}
console.log(output_SVG);
var layers = stack(nest.entries(data));
// Hardcoded swap for User and Average High
var swapper = layers[2];
layers[2] = layers[1];
layers[1] = swapper;
// console.log("LAYERS : ",layers);
console.log(capitalMeta[0]);
// Extend the domain slightly to match the range of [0, 2π].
angle.domain([0, layers.length]);
//radius.domain([0, d3.max(data, function(d) { console.log("d.y0: ",d.y0); console.log("d.y: ",d.y); return d.y + replaceY0; })]);
radius.domain([0, 10]);
var x = svg.selectAll(".axis");
alert(svg.toString());
// create Axis
svg.selectAll(".axis")
.data(d3.range(angle.domain()[1]))
.enter().append("g")
.attr("class", "axis")
.attr("transform", function(d) { return "rotate(" + angle(d) * 180 / Math.PI + ")"; })
.call(d3.svg.axis()
.scale(radius.copy().range([-5, -outerRadius]))
.ticks(5)
.orient("left"))
.append("text")
.attr("y",
function (d) {
if (window.innerWidth < 455){
console.log("innerWidth less than 455: ",window.innerWidth);
return -(window.innerHeight * .33);
}
else{
console.log("innerWidth greater than 455: ",window.innerWidth);
return -(window.innerHeight * .33);
}
})
.attr("dy", ".71em")
.attr("text-anchor", "middle")
.text(function(d, i) { return capitalMeta[i]; })
.attr("style","font-size:12px;");
svg.selectAll(".layer")
.data(layers)
.enter().append("path")
.attr("class", "layer")
.attr("d", function(d) { return area(d.values); })
.style("fill",
function(d, i)
{
if (i === 0){
return whiteColor;
}
else if (i == 1){
return z(i);
}
else
return newColor;
})
.style("opacity",.6)
.style("stroke",function(d, i){
if (i == 0)
return whiteColor;
else if (i == 2)
return pink;
else if (i == 1)
return whiteColor;
})
.style("stroke-width",function(d, i){
if (i == 1){
return 0;
}
else if (i == 0)
return 0;
else
return 7;
});
alert('finished');
/*
// Create the svg drawing canvas...
var canvas = d3.select("#radial_chart")
.append("svg:svg")
.attr("width", 300)//canvasWidth)
.attr("height", 75)//canvasHeight);
.attr("id","legend");
legendOffset = 35;
legendMarginLeft = 60;
var arrayOfTypes = ["User","Average High-Low"];
// Plot the bullet circles...
canvas.selectAll("circle")
.data(arrayOfTypes).enter().append("svg:circle") // Append circle elements
.attr("cx", legendMarginLeft)// barsWidthTotal + legendBulletOffset)
.attr("cy", function(d, i) { return legendOffset + i*25; } )
.attr("stroke-width", ".5")
.style("fill", function(d, i) {
if (i == 0)
return pink;
else
return z(i) }) // Bar fill color
.attr("r", 10);
// Create hyper linked text at right that acts as label key...
canvas.selectAll("a.legend_link")
.data(arrayOfTypes) // Instruct to bind dataSet to text elements
.enter().append("svg:a") // Append legend elements
.append("text")
.attr("text-anchor", "left")
.attr("x", legendMarginLeft+15)
.attr("y", function(d, i) { return legendOffset + i*24 - 10; })
.attr("dx", 5)
.attr("dy", "1em") // Controls padding to place text above bars
.text(function(d, i) { return arrayOfTypes[i];})
.style("color","white")
*/
// canvg();
alert('finished');
});
function capitaliseFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
推荐答案
Android不支持Canvas ，所以这当然是一个不错的选项（就SVG支持而言，你是对的，Android 2.3不兼容）。
Android does support Canvas, so that's certainly a good option (as far as SVG support goes, you are right that Android 2.3 is not compatible).
你可以使用canvas直接在d3;这里是一个比较，Mike Bostock使用一个简单的例子显示了使用SVG和Canvas之间的区别：
You can actually use canvas directly in d3; here is a comparison that Mike Bostock made showing the differences between using SVG and Canvas using a simple example:
请记住，你不仅限于SVG或Canvas;例如，已经看到 www.nytimes.com/interactive 使用d3.js与HTML元素进行可视化（我怀疑有更好的跨浏览器支持）。
请参阅： http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget- proposal-graphic.html
Keep in mind that you're not just limited to SVG or Canvas; for instance, www.nytimes.com/interactive has been seen using d3.js with HTML elements for visualizing (I'm suspecting for better cross-browser support).
See: http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html
这篇关于d3.js可视化在Android 2.3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
