我在d3看这个动画,
http://bl.ocks.org/mbostock/5100636
我想知道有没有办法让这个响应,所以大小随着浏览器窗口的大小调整而改变?或者如果使用raphael.js会更容易?
这是代码:
AmeliaBR.. 6
您有两种方法可以让SVG适应窗口大小.
第一个选择是让"可缩放矢量图形"的"可扩展"方面为您完成工作.使用相对单位(百分比或视口单位)或使用CSS媒体查询设置SVG大小以适应屏幕大小.然后viewBox
在SVG中添加一个属性,使图像缩放以适合您放入的任何大小的盒子.限制是所有内容均匀缩放,如果图形的大小发生显着变化,则会导致非常大或非常小的文本标签.好处是重新调整大小完全独立于您的代码和图形中的任何动画.
应用于弧补间演示的概念示例:http:
//fiddle.jshell.net/h8Mg9/
关键代码:
var svg = d3.select("body").append("svg") .attr("height", "100%") //or use CSS .attr("width", "100%") .attr("viewBox", "0 0 " + (margin.left + diameter + margin.right) + " " + (margin.top + diameter + margin.bottom) ) //"0 0 160 120" -- defines relative units for drawing //(0,0) for top left corner coordinates, //then width and height. .attr("preserveAspectRatio", "xMidYMid meet"); //maintain aspect ratio from viewBox dimensions; //If they don't match svg dimensions, scale down to //fit the entire viewbox within the svg (meet); //center it vertically and horizontally (xMidYMid)
请注意,文本的大小始终与环成比例,就像环的直径为100px一样.此外,文本转换只是旧位置和新位置之间的直线转换.
第二个选项是监听窗口大小调整事件,查询svg大小然后触发重新绘制.绘图函数中的所有大小变量都必须适当地缩放到尺寸.此外,您必须考虑在转换期间发生调整大小事件的可能性.自定义弧补间实际上使这更容易,因为它在转换的每个刻度处调用弧函数; 通过更改arc函数的参数,补间结果也会自动更改.
弧补间演示中此方法的示例:http:
//fiddle.jshell.net/h8Mg9/2/
关键代码:
function setSize() { var svgStyles = window.getComputedStyle(svg.node()); diameter = Math.min( (parseInt(svgStyles["width"]) - margin.left - margin.right), (parseInt(svgStyles["height"]) - margin.top - margin.bottom) ); arc.outerRadius(diameter/2) .innerRadius(diameter/2 - ringThickness); vis.attr("transform", "translate(" + (margin.left + diameter/2) + "," + (margin.top + diameter/2) + ")"); background.attr("d", arc); if(!transitioning) { //don't interrupt an ongoing transition -- //it will automatically adjust //because we've modified the arc function; //note that we've created a custom tween //for the label, so it will adjust too. //Otherwise: foreground.attr("d", arc); label.attr("transform", function(d) { return "translate("+arc.centroid(d)+")" }); } //Note that we're not transitioning the change //in diameter; it isn't necessary since there //will be multiple resize events creating a smooth //shift in size. } setSize(); //initialize //adapt size to window changes: window.addEventListener("resize", setSize, false)
饼图的另一个好处是,在弧函数的outerRadius中,大小实际上只设置了一次.对于更复杂的布局重绘,您需要使用比例来确定位置和大小.关于缩放的这个答案的最后一个例子显示了使用音阶调整大小.
要在缩放布局中组合过渡和调整大小,可以使用与饼图中相同的方法(更改弧函数更改补间函数的结果),并使用自定义补间函数查询缩放的当前状态每个蜱.然而,在大多数情况下,简单地中断正在进行的过渡可能更有效 - 即,创建一个新的过渡,最终将尺寸的变化与尺寸的变化结合起来.
您有两种方法可以让SVG适应窗口大小.
第一个选择是让"可缩放矢量图形"的"可扩展"方面为您完成工作.使用相对单位(百分比或视口单位)或使用CSS媒体查询设置SVG大小以适应屏幕大小.然后viewBox
在SVG中添加一个属性,使图像缩放以适合您放入的任何大小的盒子.限制是所有内容均匀缩放,如果图形的大小发生显着变化,则会导致非常大或非常小的文本标签.好处是重新调整大小完全独立于您的代码和图形中的任何动画.
应用于弧补间演示的概念示例:http:
//fiddle.jshell.net/h8Mg9/
关键代码:
var svg = d3.select("body").append("svg") .attr("height", "100%") //or use CSS .attr("width", "100%") .attr("viewBox", "0 0 " + (margin.left + diameter + margin.right) + " " + (margin.top + diameter + margin.bottom) ) //"0 0 160 120" -- defines relative units for drawing //(0,0) for top left corner coordinates, //then width and height. .attr("preserveAspectRatio", "xMidYMid meet"); //maintain aspect ratio from viewBox dimensions; //If they don't match svg dimensions, scale down to //fit the entire viewbox within the svg (meet); //center it vertically and horizontally (xMidYMid)
请注意,文本的大小始终与环成比例,就像环的直径为100px一样.此外,文本转换只是旧位置和新位置之间的直线转换.
第二个选项是监听窗口大小调整事件,查询svg大小然后触发重新绘制.绘图函数中的所有大小变量都必须适当地缩放到尺寸.此外,您必须考虑在转换期间发生调整大小事件的可能性.自定义弧补间实际上使这更容易,因为它在转换的每个刻度处调用弧函数; 通过更改arc函数的参数,补间结果也会自动更改.
弧补间演示中此方法的示例:http:
//fiddle.jshell.net/h8Mg9/2/
关键代码:
function setSize() { var svgStyles = window.getComputedStyle(svg.node()); diameter = Math.min( (parseInt(svgStyles["width"]) - margin.left - margin.right), (parseInt(svgStyles["height"]) - margin.top - margin.bottom) ); arc.outerRadius(diameter/2) .innerRadius(diameter/2 - ringThickness); vis.attr("transform", "translate(" + (margin.left + diameter/2) + "," + (margin.top + diameter/2) + ")"); background.attr("d", arc); if(!transitioning) { //don't interrupt an ongoing transition -- //it will automatically adjust //because we've modified the arc function; //note that we've created a custom tween //for the label, so it will adjust too. //Otherwise: foreground.attr("d", arc); label.attr("transform", function(d) { return "translate("+arc.centroid(d)+")" }); } //Note that we're not transitioning the change //in diameter; it isn't necessary since there //will be multiple resize events creating a smooth //shift in size. } setSize(); //initialize //adapt size to window changes: window.addEventListener("resize", setSize, false)
饼图的另一个好处是,在弧函数的outerRadius中,大小实际上只设置了一次.对于更复杂的布局重绘,您需要使用比例来确定位置和大小.关于缩放的这个答案的最后一个例子显示了使用音阶调整大小.
要在缩放布局中组合过渡和调整大小,可以使用与饼图中相同的方法(更改弧函数更改补间函数的结果),并使用自定义补间函数查询缩放的当前状态每个蜱.然而,在大多数情况下,简单地中断正在进行的过渡可能更有效 - 即,创建一个新的过渡,最终将尺寸的变化与尺寸的变化结合起来.