跨多个图的D3.js同步缩放

时间：2019-02-19 00:32:42

标签： javascript node.js d3.js zoom interaction

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

enter image description here

这些客户端具有相同的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)
    }
  1. d3.event.transform捕获鼠标事件。
  2. 转换为日期时间和字符串。
  3. 将新的扩展域发送到服务器。

服务器将接收到的数据发送到所有客户端：

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);
    }
  1. 从服务器收到的包含新日期的消息。
  2. 设置新域，
  3. 更新折线图。

使用此功能可以缩放|平移所有折线图。

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

如果我放大客户端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");
  });
});

1 个答案:

答案 0 :(得分：2)

假设我理解了这个问题，

第一个问题是您没有更新zoom本身。

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

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

此：

  • 更新zoom变量跟踪的缩放状态/身份
  • 发出缩放事件，该事件将调用zoomed函数（如果画笔触发它，则在画笔和缩放示例中将忽略该事件）

如果我们删除这条线，则通过笔刷进行的缩放状态更改不会更新缩放。刷到很小的域，然后放大并查看here。

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

下面，我将演示如何使用一种缩放来更新另一种。 注意：如果每个缩放函数都调用了其他函数，我们将进入无限循环。借助brush和zoom，我们可以查看触发器是否为brush以查看是否需要缩放功能，下面我使用d3.event.sourceEvent.target来查看其他缩放功能是否需要传播缩放：< / p> 

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时，我们将放大倍数放大而不是缩小）。转换已经是累积的 ，我们不想将其应用于已应用转换的值。

在变换后的值而不是原始值上应用变换可能会导致放大，即使缩小时也是如此-这可能是您在缩小时遇到困难的原因

因此，这带给我第二个问题，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所指出的那样，您可能应该传递zoom参数（或者更好的是d3.event本身），而不是域，尽管仅域选项是可能的。

使用套接字时，我在发送对象时确实遇到了一些麻烦-我对socket.io不熟悉，也没有花费大量时间进行查找，但是我将其与缩放和被动缩放功能一起使用是这样的： 

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数据源等。

相关问题
最新问题