[英]D3js X AXIS time - out of range
I did a graph where my x-axis is out of the range in svg element.我做了一个图表,其中我的 x 轴超出了 svg 元素的范围。 I am using object structure ProgressGraph to save my options (because of another things...) I would like to set x-axis to fixed size 720x450, but when I call zoom or I want to translate graph to right / left , the X-axis is going out of the svg element.
我正在使用对象结构 ProgressGraph 来保存我的选项(因为其他事情......)我想将 x 轴设置为固定大小 720x450,但是当我调用 zoom 或我想将图形向右/向左转换时,X -axis 正在离开 svg 元素。 The x-axis size width is changing from 720 to 920.53 and I do not know why.
x 轴尺寸宽度从 720 变为 920.53,我不知道为什么。 This width should be fixed to 720px.
此宽度应固定为 720 像素。
Screenshots: Good One good one before zoom / move to side Bad One bad one after zoom / move to side屏幕截图:好放大前一张好/移到一边坏放大/移到一边后一张坏
graphParams : {
//whole size
width : 1050,
height : 600,
//svg -g
svg_width: 720,
svg_height : 450
}
x = d3.time.scale().domain(ProgressGraph.xAxisDomain).range([0,graphParams.svg_width]);
xAxis =
d3.svg.axis()
.scale(x)
.orient("bottom")
.tickSize(-graphParams.svg_height)
.tickPadding(12)
.ticks(12);
yAxis =
d3.svg.axis()
.scale(y)
.orient("left")
.tickSize(-graphParams.svg_width);
zoom =
d3.behavior.zoom()
.x(x)
.scaleExtent([1, 32])
.on("zoom", zoomed);
var svg = d3.select("#projectProgress-graph-div").append("svg")
.attr("width", graphParams.width)
.attr("height", graphParams.height)
.append("g")
.attr("id", "projectProgress-graph-svg")
.attr("transform", "translate(" + (graphMargin.left) + "," + graphMargin.top + ")")
.call(zoom);
svg.append("rect")
.attr("width", graphParams.svg_width )
.attr("height", graphParams.svg_height);
svg.append("g")
.attr("class", "x axis")
.attr("width", graphParams..svg_width)
.attr("transform", "translate(0, " + graphParams.svg_height + ")")
.call(xAxis)
.selectAll("text")
.attr("dx", "-2em")
.attr("dy", ".0em")
.attr("transform", "rotate(-65)" );
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
function zoomed() {
svg.select(".x.axis").call(xAxis)
.selectAll("text")
.attr("dx", "-2em")
.attr("dy", "0em")
.attr("transform", "rotate(-65)" );
}
Sollution is add a svg element befero we add "g element" for x axis解决方案是添加一个 svg 元素,然后我们为 x 轴添加“g 元素”
svg.append("svg")
.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0 , " + graphParams.svg_height + ")")
.call(xAxis)
.selectAll("text")
.attr("dx", "-2em")
.attr("dy", ".0em")
.attr("transform", "rotate(-65)" );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.