D3.js跨多个图同步缩放

Question

我想制作折线图，以便与多个网页同步缩放/平移。

这些客户端具有相同的Javascript和HTML源。用户缩放或平移客户端A，将数据域的日期时间的消息发送给另一个和发送者（上图中的蓝线），并且接收的客户端的图表将同时更改。当然，其他客户也可以这样做。它类似于聊天应用程序。

缩放功能是：

 function zoomed() {
        let msg = [];
        let t = d3.event.transform; //1)

        msg[0] = t.rescaleX(x2).domain()[0].toString(); //2)
        msg[1] = t.rescaleX(x2).domain()[1].toString(); //2)

        sendMessage(msg); //3)
    }

d3.event.transform捕获鼠标事件。
转换为日期时间和字符串。
将新的扩展域发送到服务器。

服务器将收到的数据发送给所有客户

function passiveZoom(rcv){
        let leftend;
        let rightend;
        leftend = new Date(rcv[0]);
        rightend = new Date(rcv[1]);

        x.domain([leftend, rightend]);

        svg.select(".line").attr("d", valueline);
        svg.select(".axis").call(xAxis);
    }

收到来自服务器的消息，其中包含新的一天时间。
设置新域名，
更新折线图。

通过这种方式，可以缩放所有折线图。

但是，它不能按要求工作。

如果我在客户端A中进行缩放，则客户端B和客户端C将被更改。那没问题。

接下来，我在客户端C上进行缩放（上图中的橙色线），所有图形都变为初始比例和位置。为什么！？

我假设鼠标坐标没有发送到客户端，但是当我发送鼠标的位置坐标时应该如何处理？

Zoom | Pan过程是从mbostock的块：Brush & Zoom分叉的。发件人还使用t.rescalex (x2).domain()更改X2域的范围。由于X2未在图纸中使用，我将X更改为x2，但我只能放大。我不明白X2的含义。

您能告诉我如何同步所有客户吗？什么是x2？

此代码适用于Simple line graph with v4分叉的客户端。

<!DOCTYPE html>
<meta charset="utf-8">
<style>
/* set the CSS */

body {
    font: 12px Arial;
}

path {
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}

.zoom {
    cursor: move;
    fill: none;
    pointer-events: all;
}

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}
</style>

<body>
    <!-- load the d3.js library -->
    <script src="http://d3js.org/d3.v4.min.js"></script>
     <script src="socket.io.js"></script>
    <script>

        //--- Network----
    let rcvT;
    let socket = io.connect('http://localhost:3000'); 

    //Recive event from server
    socket.on("connect", function() {}); 
    socket.on("disconnect", function(client) {}); 
    socket.on("S_to_C_message", function(data) {
        rcvT = data.value;
        passiveZoom(rcvT);

    });
    socket.on("S_to_C_broadcast", function(data) {
        console.log("Rcv broadcast " + data.value);
        rcvT = data.value;
        passiveZoom(rcvT);
    });

    function sendMessage(msg) {
        socket.emit("C_to_S_message", { value: msg }); //send to server
    }

    function sendBroadcast(msg) {
        socket.emit("C_to_S_broadcast", { value: msg }); // send to server
    }

    // --------------------

    // Set the dimensions of the canvas / graph
    var margin = { top: 30, right: 20, bottom: 30, left: 50 },
        width = 600 - margin.left - margin.right,
        height = 270 - margin.top - margin.bottom;

    // Parse the date / time
    var parseDate = d3.timeParse("%d-%b-%y");

    // Set the ranges
    var x = d3.scaleTime().range([0, width]);
    var y = d3.scaleTime().range([height, 0]);
    var x2 = d3.scaleTime().range([0, width]);

    xAxis = d3.axisBottom(x)
        .tickFormat(d3.timeFormat('%d-%b-%y'))
        .ticks(5);

    // var yAxis = d3.svg.axis().scale(y)
    //     .orient("left").ticks(5);
    yAxis = d3.axisLeft(y);

    // Define the line
    var valueline = d3.line()
        .x(function(d) { return x(d.date); })
        .y(function(d) { return y(d.close); });

    // Adds the svg canvas
    var svg = d3.select("body")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform",
            "translate(" + margin.left + "," + margin.top + ")");

    // Get the data
    d3.csv("data.csv", function(error, data) {
        data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.close = +d.close;
        });

        // Scale the range of the data
        x.domain(d3.extent(data, function(d) { return d.date; }));
        x2.domain(x.domain());
        y.domain([0, d3.max(data, function(d) { return d.close; })]);

        // Add the valueline path.
        svg.append("path")
            .data([data])
            .attr("class", "line")
            .attr("d", valueline);

        // Add the X Axis
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        // Add the Y Axis
        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis);

    });
    //follow is zoom method------------------
    zoom = d3.zoom()
        .scaleExtent([1, 45])
        .translateExtent([
            [0, 0],
            [width, height]
        ])
        .extent([
            [0, 0],
            [width, height]
        ])
        .on("zoom", zoomed);

    svg.append("rect")
        .attr("class", "zoom")
        .attr("width", width)
        .attr("height", height)
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .call(zoom);

    function zoomed() {
        let msg = [];
        let t = d3.event.transform;

        msg[0] = t.rescaleX(x2).domain()[0].toString();
        msg[1] = t.rescaleX(x2).domain()[1].toString();

        sendMessage(msg);
    }

    function passiveZoom(rcv){
        let start;
        let end;
        start = new Date(rcv[0]);
        end = new Date(rcv[1]);

        x.domain([start, end]);

        svg.select(".line").attr("d", valueline);
        svg.select(".axis").call(xAxis);
    }



    </script>
</body>

如果您尝试此代码，您应该执行几个bowser窗口，并运行此node.js脚本。

var http = require("http");
var socketio = require("socket.io");
var fs = require("fs");

console.log("reflector start");


var server = http.createServer(function(req, res) {
     res.writeHead(200, {"Content-Type":"text/html"});
     var output = fs.readFileSync("./index.html", "utf-8");
     res.end(output);
}).listen(process.env.VMC_APP_PORT || 3000);

var io = socketio.listen(server);

io.sockets.on("connection", function (socket) {

  // send message to all
  socket.on("C_to_S_message", function (data) {
    io.sockets.emit("S_to_C_message", {value:data.value});
       console.log("MSG "+data.value);
  });

  // boradcast send to all without sender
  socket.on("C_to_S_broadcast", function (data) {
    socket.broadcast.emit("S_to_C_broadcast", {value:data.value});
  });

  // disconnection
  socket.on("disconnect", function () {
  console.log("disconnect");
  });
});

Answer 1

假设我明白这个问题，

（第一个）问题是你没有更新（the）zoom本身。

在使用d3.zoom的情况下，它通常只跟踪当前的缩放状态，而不是直接在容器上应用变换。在画笔和缩放示例中，通过重新缩放数据来应用缩放 - 而不是通过将SVG变换应用于容器。使用该示例，我们可以看到，当我们刷时，我们也会调用：

svg.select(".zoom").call(zoom.transform, someZoomTransform);

这个：

更新zoom变量跟踪的缩放状态/标识
发出缩放事件，该事件调用缩放功能（如果画笔触发，则会忽略画笔和缩放示例中的功能）

如果我们删除此行，刷新所做的缩放状态更改不会更新缩放。刷到一个非常小的域，然后放大并查看here。

在您的代码中就是这种情况，当您使用zoomed函数和d3.event.transform更新图表时，您没有更新缩放状态。您正在更新比例 - 但zoom未更新。

下面我将演示如何使用一个缩放来更新另一个。注意：如果每个缩放函数调用其他函数，我们将进入无限循环。使用画笔和缩放，我们可以看到触发器是否是刷子以查看是否需要缩放功能，下面我使用d3.event.sourceEvent.target来查看其他缩放功能是否需要传播缩放：

var svg = d3.select("svg");
var size = 100;
var zoom1 = d3.zoom().scaleExtent([0.25,4]).on("zoom", zoomed1);
var zoom2 = d3.zoom().scaleExtent([0.25,4]).on("zoom", zoomed2);

var rect1 = svg.append("rect")
  .attr("width", size)
  .attr("height", size)
  .attr("x", 10)
  .attr("y", 10)
  .call(zoom1);
var rect2 = svg.append("rect")
  .attr("width", size)
  .attr("height", size)
  .attr("x", 300)
  .attr("y", 10)
  .call(zoom2);

function zoomed1() {
  var t = d3.event.transform;
  var k = Math.sqrt(t.k);
  rect1.attr("width",size/k).attr("height",size*k);
  
  if(d3.event.sourceEvent.target == this) {
    rect2.call(zoom2.transform,t); 
  }
}
function zoomed2() {
  var t = d3.event.transform;
  var k = Math.sqrt(t.k);
  rect2.attr("width",size/k).attr("height",size*k);
   
  if(d3.event.sourceEvent.target == this) {
    rect1.call(zoom2.transform,t); 
  }
}

rect {
    cursor: pointer;
	stroke: #ccc;
	stroke-width: 10;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
Zoom on one rectangle to update the other.
<svg width="600" height="300"></svg>

您可能想知道为什么我硬编码大小，为什么我不修改当前大小，而不是原始大小。答案是缩放变换比例是相对于原始状态的比例 - 而不是最后一个状态。例如，如果缩放比例为每个缩放加倍，并且我们放大2倍，则比例从：k = 1→k = 2→k = 4。如果我们将形状的当前大小乘以新的比例，我们得到size = 1→size = 2→size = 8，这是不正确的（当缩小到k = 2时，我们将把我们缩放的数量加倍in，而不是缩小）。变换已经累积，我们不希望将其应用于已对其应用变换的值。

将变换应用于变换值而不是原始值，即使在缩小时也会导致变焦增加 - 这可能是您在缩小时遇到问题的原因

所以，这让我想到了第二个问题，x2。 x2是参考，原始值。是的，正如Gerardo所说，它也是你的例子中刷子的比例，但更重要的是，他说这个比例不会改变。因此，x2非常适合用作参考比例，我们可以使用它来转换x给定缩放状态：

x.domain(t.rescaleX(x2).domain());

这里发生了什么？ transform.rescaleX(x2)不修改x2，它“返回连续缩放x的副本，其域名被转换[给定缩放变换]。（docs）”。我们采用副本的域并将其分配给x量表（当然范围保持不变），并通过这样做，将变换应用于x量表。这与我上面的正方形/矩形片段基本相同，其中我保留了形状初始大小的参考值，并将变换应用于此值。

让我们看一下使用带有比例而不是普通形状的基本图形/图表：

var svg = d3.select("svg");
var data = [[0,300],[1,20],[2,300]];

// Area generators:
var leftArea = d3.area().curve(d3.curveBasis)
  .x(function(d) { return leftX(d[0]); })
  
var rightArea = d3.area().curve(d3.curveBasis)
  .x(function(d) { return rightX(d[0]); })

// Scales
var leftX = d3.scaleLinear().domain([0,2]).range([0,250]);
var rightX = d3.scaleLinear().domain([0,2]).range([300,550]);

var leftX2 = leftX.copy();
var rightX2 = rightX.copy();

// Zooms
var leftZoom = d3.zoom().scaleExtent([0.25,4]).on("zoom", leftZoomed);
var rightZoom = d3.zoom().scaleExtent([0.25,4]).on("zoom", rightZoomed);

// Graphs
var leftGraph = svg.append("path")
  .attr("d", leftArea(data))
  .call(leftZoom);
  
var rightGraph = svg.append("path")
  .attr("d", rightArea(data))
  .call(rightZoom);
  
function leftZoomed() {
  var t = d3.event.transform;
  leftX.domain(t.rescaleX(leftX2).domain());
  leftGraph.attr("d",leftArea(data));
        
  if(d3.event.sourceEvent.target == this) {
    rightGraph.call(rightZoom.transform,t); 
  }
}
function rightZoomed() {
  var t = d3.event.transform;
  rightX.domain(t.rescaleX(rightX2).domain());
  rightGraph.attr("d",rightArea(data));
        
  if(d3.event.sourceEvent.target == this) {
    leftGraph.call(leftZoom.transform,t); 
  }
}

path {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
    Zoom on one plot to update the other (zoom on the path area itself)
    <svg width="600" height="300"></svg>

简而言之，要在一个页面或客户端之间同步多个可缩放的缩放图形，您应该：

用selection.call(zoom.transform,transform)更新每个缩放
使用当前变换和参考比例重新缩放每个比例。

我没有尝试使用多个客户端和套接字。但是，上述内容应有助于解释如何解决问题。但是，对于多个客户端，您可能需要修改我停止无限循环缩放事件的方式，在变换对象中使用或设置属性可能是最简单的。另外，正如rioV8注意到的那样，你应该传递缩放参数（或者更好的是，d3.event本身），而不是域，尽管只有域选项是可能的。

有了套接字，我确实在发送对象时遇到了一些麻烦 - 我对socket.io并不熟悉，并且没有花费大量的时间来查看，但我使用了zoom和passivezoom函数，因为：

function zoomed() {
    let t = d3.event.transform;

    // 1. update the scale, same as in brush and zoom:
    x.domain(t.rescaleX(x2).domain());

    // 2. redraw the graph and axis, same as in brush and zoom:
    path.attr("d", area);  // where path is the graph
    svg.select(".xaxis").call(xAxis);

    // 3. Send the transform, if needed:
    if(t.alreadySent == undefined) {
      t.alreadySent = true; // custom property.
      sendMessage([t.k,t.x,t.y,t.alreadySent]);
    }
}

function passiveZoom(rcv){
    // build a transform object (since I was unable to successfully transmit the transform)
    var t = d3.zoomIdentity;
    t.k = rcv[0];
    t.x = rcv[1];
    t.y = rcv[2];
    t.alreadySent = rcv[3];
    //trigger a zoom event (invoke zoomed function with new transform data).
    rect.call(zoom.transform,t);  // where rect is the selection that zoom is called on.
}

我不是发送事件，而是发送变换参数（仅）和标志，以注意被动缩放功能触发的缩放事件不需要再次向前传递。这基本上基于上述片段。

无需修改服务器端脚本。这是我使用的client side - 它比你的代码更基本，因为我删除了y刻度，y轴，csv数据源等。

D3.js跨多个图同步缩放

问题描述投票：5回答：1

1个回答

最新问题

D3.js跨多个图同步缩放

问题描述 投票：5回答：1

1个回答

最新问题

问题描述投票：5回答：1