Question

我试图通过在系列图上拖动一个矩形来确定缩放间隔来缩放工作。这是我的傻瓜

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");

对此有任何帮助表示赞赏。

非常感谢。

Answer 1

我认为方法 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
                }

希望它有所帮助！

无法通过在d3系列图表上拖动矩形来进行缩放以使其正常工作

1 个答案: