修改

Harpal告诉我在d3 v4中工作的example，但我不知道如何应用于我的项目。

所以有我的剧本：

library(prophet)    
library(dplyr)
library(lubridate)
df <- read.csv('example_wp_peyton_manning.csv') %>%  mutate(y = log(y))
df$ds <-ymd(df$ds)       # ds is now a Date type
model <- prophet(df)     # Create forecasting model
# Make data-frame with future dates for forecasting.
future <- make_future_dataframe(model, periods = 365)
# Make forecasts of these future periods
forecast <- predict(model, future)
# Calculate residuals for common dates
df1<-inner_join(forecast,df, by="ds")  
df1$residuals<-df1$y - df1$yhat
# And calculate ACF
acf(df1$residuals,lag.max = 10)

我应用//-----------------------------------Variables --------------------------------------------------------------------------- //Alto y ancho var w = 500; var h = 500; var padding = 0; var coundata= 0; var maxx = 0.30 var minx = -0.30 var maxy = 6 var miny = -6 //-----------------------------------CREAR GRAFICO SCATTER ---------------------------------------------------------------- //Funciones de escala var xScale = d3.scaleLinear() .domain([minx, maxx]) .range([padding, h]); var yScale = d3.scaleLinear() .domain([miny, maxy]) .range([h, padding]); var rScale = d3.scaleLinear() .domain([0,5]) .range([2, 6]); //Eje x var xAxis = d3.axisBottom() .scale(xScale);; //Eje y var yAxis = d3.axisLeft() .scale(yScale); //Crear el elemento svg var svg = d3.select("#linegraph") .append("svg") .attr("width", w) .attr("height", h); //Colores grupo = svg.append("svg:g"); var c2 = grupo.append("rect") .attr("width", (w/2) - padding) .attr("height", (h/2)- padding) .attr("transform", "translate("+w/2+","+padding+")") .attr("fill", "rgba(0, 255, 0, 0.3)"); var c1 = grupo.append("rect") .attr("width", (w/2) - padding) .attr("height", (h/2)- padding) .attr("transform", "translate("+padding+","+padding+")") .attr("fill", "rgba(255, 255, 0, 0.3)"); var c3 = grupo.append("rect") .attr("width", (w/2) - padding) .attr("height", (h/2)- padding) .attr("transform", "translate("+padding+","+h/2+")") .attr("fill", "rgba(255, 0, 0, 0.3)"); var c4 = grupo.append("rect") .attr("width", (w/2) - padding) .attr("height", (h/2)- padding) .attr("transform", "translate("+w/2+","+h/2+")") .attr("fill", "rgba(255, 165, 0, 0.3)"); var g =svg.append("g"); //Añadimos el eje x var gX = svg.append("g") .attr("class", "axis") .attr("transform", "translate(0," + (h/2) + ")") .call(xAxis); //Añadimos el eje y var gY = svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + (w/2) + ",0)") .call(yAxis); nowData = [] var grupo2 = svg.append("svg:g"); //Creamos los puntos var datos = grupo2.selectAll("circle") .data(nowData) .enter() .append("circle") .attr("cx", function(d) { return xScale(d[0]); }) .attr("cy", function(d) { return yScale(d[1]); }) .attr("r", function(d) { return 5; }) .append("svg:title") .text(function(d) {return "Valor x: "+d[0] +"\n Valor y :"+d[1]; }) ; var grupoLineas = svg.append("svg:g"); //--------------------------------- ZOOM--------------------------------------------------------------------- var zoom = d3.zoom() // Don’t allow the zoomed area to be bigger than the viewport. .scaleExtent([1, Infinity]) .translateExtent([[0, 0], [w, h]]) .extent([[0, 0], [w, h]]) .on("zoom", zoomed); grupo.style("transform-origin","50% 50% 0"); grupo2.style("transform-origin","50% 50% 0"); grupoLineas.style("transform-origin","50% 50% 0"); svg.style("transform-origin","50% 50% 0"); gX.style("transform-origin","50% 50% 0"); gY.style("transform-origin","50% 50% 0"); svg.call(zoom); function zoomed() { svg.attr("transform", d3.event.transform); gX.call(xAxis.scale(d3.event.transform.rescaleX(xScale))); gY.call(yAxis.scale(d3.event.transform.rescaleY(yScale))); grupo2.attr("transform",d3.event.transform); grupoLineas.attr("transform",d3.event.transform); grupo.attr("transform",d3.event.transform); } function resetted() { svg.transition() .duration(750) .call(zoom.transform, d3.zoomIdentity); } d3.select("#zoom_in") .on("click",function(){ zoom.scaleBy(svg, 2); }) d3.select("#zoom_out") .on("click",function(){ zoom.scaleBy(svg, 0.5); }) //---------------------------------------Funcion mostrarDatos ---------------------------------------------------------- function mostrarDatos(){ nowData=[] grupo2.selectAll("circle") .data(nowData) .exit() .remove() if($("#eae").prop('checked') == true) { nowData.push(eaepunt1[coundata]) grupo2.selectAll("circle") } if($("#arab").prop('checked') == true) { nowData.push(arabpunt1[coundata]) } console.log(nowData) grupo2.selectAll("circle") .data(nowData) .enter() .append("circle") .attr("cx", function(d) { return xScale(d[0]); }) .attr("cy", function(d) { return yScale(d[1]); }) .attr("r", function(d) { return 5; }) .append("svg:title") .text(function(d) {return "Valor x: "+d[0] +"\n Valor y :"+d[1]; }) ; } $("#eae").change(function() { mostrarDatos(); }); $("#arab").change(function() { mostrarDatos() });，但无法正常使用

Answer 1

你可以做2件事

首先，将缩放直接应用于中心：

    var zoom = d3.zoom()                            
        // Don’t allow the zoomed area to be bigger than the viewport.
        .scaleExtent([1, Infinity])
        .translateExtent([[0, 0], [w, h]])
        .extent([[0, 0], [w, h]])
        .on("zoom", zoomed);                

    grupopadre.style("transform-origin", "50% 50% 0");
    svg.call(zoom);
    function zoomed() {         
        grupopadre
            .style('transform', 'scale(' + d3.event.transform.k + ')');
    }

其次，缩小时将图形居中：

    var zoom = d3.zoom()                            
        // Don’t allow the zoomed area to be bigger than the viewport.
        .scaleExtent([1, Infinity])
        .translateExtent([[0, 0], [w, h]])
        .extent([[0, 0], [w, h]])
        .on("zoom", zoomed);                

    grupopadre.style("transform-origin", "50% 50% 0");

    svg.call(zoom);
    function zoomed() {         
        grupopadre.attr("transform",d3.event.transform);
    }

您需要创建一个包含所有svg内容的组。

Answer 2

不确定是否能回答您的问题，但在此您可以在V4中看到类似示例：https://bl.ocks.org/mbostock/db6b4335bf1662b413e7968910104f0f

您可以在版本4的D3 API文档中找到有关缩放行为的详细文档，我不认为存在更多＆＃34;显而易见的＆＃34;未记录的方式：https://github.com/d3/d3/blob/master/API.md#zooming-d3-zoom

Answer 3

您可以将transform-origin添加到执行缩放的元素的style属性中：

.style("transform-origin", "50% 50% 0")

修改

工作Plnkr here

Answer 4

我认为现在只是d3.zoom（）

var zoom = d3.zoom()
            // Don’t allow the zoomed area to be bigger than the viewport.
            .scaleExtent([1, Infinity])
            .translateExtent([[0, 0], [width, height]])
            .extent([[0, 0], [width, height]])
            .on("zoom", zoomed);

Answer 5

这是我找到的解决方案：

function zoomed() {
    var scale = d3.event.transform.k; 
    grupopadre.attr("transform", "translate(" + 0 + ")scale(" + scale + ")");
}

D3 v4只需缩放到中心

修改

5 个答案: