我正试图通过在序列图上拖动一个矩形来确定缩放的间隔来实现缩放。这是我的plunkr
http://plnkr.co/edit/isaHzvCO6fTNlXpE18Yt?p=preview
你可以用鼠标在图表上画一个矩形来解决这个问题——新图表超出了X轴和Y轴的边界。我以为svg下的小组会处理系列赛的边界(路径),但我显然错了。盯着它看了很长时间,我想不通。请忽略plunkr的角度。我认为问题出在的某个地方
//Build series group
var series = svgGroup.selectAll(".series")
.data(data)
.enter().append("g")
.attr("class", "series");
//Build each series using the line function
series.append("path")
.attr("class", "line")
.attr("d", function (d) {
return line(d.series);
})
.attr("id", function (d) {
//While generating the id for each series, map series name to the path element.
//This is useful later on for dealing with legend clicks to enable/disable plots
legendMap[d.name] = this;
//Build series id
return buildPathId(d.name);
})
.style("stroke", function (d) {
//Use series name to get the color for plotting
return colorFcn(d.name);
})
.style("stroke-width", "1px")
.style("fill", "none");
如有任何帮助,我们将不胜感激。
非常感谢。
我认为方法renderChartWithinSpecifiedInterval(minX,maxX,minY,maxY,pixelCoordinates)可能存在一些问题。
第130行中传递的像max_x这样的参数似乎是一个非常大的值,就像时间秒一样
var svg = renderChartWithinSpecifiedInterval(min_X, max_X, min_Y, max_Y, false);
max_X,min_X are value like 1415171404335
min_Y = 0, max_Y = 100
但在第192行的dragDrop呼叫中
function gEnd(d,i){
svg.selectAll(".zoom-rect").remove();
var svgGp = svg.select("g");
var groupTransform = d3.transform(svgGp.attr("transform"));
var xOffset = groupTransform.translate[0];
var yOffset = groupTransform.translate[1];
var xBegin = Math.min(xStart,xDyn) - xOffset;
var xEnd = Math.max(xStart,xDyn) - xOffset;
var yBegin = Math.min(yStart,yDyn) - yOffset;
var yEnd = Math.max(yStart,yDyn) - yOffset;
renderChartWithinSpecifiedInterval(xBegin, xEnd, yBegin, yEnd, true);
//It seems here the parameters values are all pixels
like xBegin = 100, xEnd = 200
}
希望它能有所帮助!