使用数组计算坐标之间的距离，并设置Y轴和比例- D3.js

Using arrays to calculate distance between co ordinates and set Y axis and scale - D3.js

本文关键字：js D3 设置 计算 数组 坐标 之间 距离      更新时间：2023-09-26

我有x和y坐标，我应该在单个y轴中表示。(我的想法是计算两点之间的距离，并用Y轴表示。我也用X轴表示时间。我尝试了以下内容:但是我如何使用数组来固定Y轴比例?有什么办法能让我做到吗?请帮助

d3.csv("xxx.csv", function(error, data) {
         for (var i=0; i< data.length ; i++)
          {
         datax[i-2] =  Math.sqrt(( data[i].x1 - data[i-1].x1 )* ( data[i].x1 - data[i-1].x1 )
                         + ( data[i].y1 - data[i-1].y1 )* ( data[i].y1 - data[i-1].y1 ));
    datay[i] = d.Time;
         //  }
//  }

如果我使用下面的方法，我没有办法访问数组的索引元素或使用'd'。或者我如何实现下面的距离计算?

 // load data
 d3.csv("xxx.csv", function(error, data) {
 // change string (from CSV) into number format
  data.forEach(function(d) {
   d.x1 = +d.x1;
  d.y1 = +d.y1;
 console.log(d);
 });

示例数据:

类型studentId时间x1 y1 z1 x2 y2 z2 x3 y3
位置a 106 92 881.42 371.92 1.05 15.93 0 10.4 1
位置a 106 92.4 893.87 459 1.05 15.84 0 6.2 1
位置a 106 92.6 898.98 430 1.05 16.01 0 1.41 1
位置a 106 92.8 9001 416.94 1.05 16.6 0 356.62 1
位置a 106 93 904.1 416.94 1.05 16.85 0 353.85 1
位置a 106 93.2 920 416.94 1.05 16.43 0 354.27 1
位置a 106 93.4 925 416.94 1.05 16.43 0 354.27 1

可以使用引用数组中前一个对象的forEach。在这里，我创建了一个新的键/值par，命名为distance，从第二个对象开始(当然，第一个对象没有先前的记录来计算距离):

data.forEach(function(d,i){
    if(i>0){
    d.distance = Math.sqrt(Math.pow((d.x1 - data[i-1].x1),2)
        + Math.pow((d.y1 - data[i-1].y1),2));
    }
});

这是一个演示。在这个演示中，我将CSV更改为d3.csv创建的最终对象数组(因为我不能在SO片段中使用CSV文件):

var data = [{"type":"PositionA","studentId":"106","Time":"92","x1":"881.42","y1":"371.92","z1":"1.05","x2":"15.93","y2":"0","z2":"10.4","x3":"1"},{"type":"PositionA","studentId":"106","Time":"92.4","x1":"893.87","y1":"459","z1":"1.05","x2":"15.84","y2":"0","z2":"6.2","x3":"1"},{"type":"PositionA","studentId":"106","Time":"92.6","x1":"898.98","y1":"430","z1":"1.05","x2":"16.01","y2":"0","z2":"1.41","x3":"1"},{"type":"PositionA","studentId":"106","Time":"92.8","x1":"900.1","y1":"416.94","z1":"1.05","x2":"16.6","y2":"0","z2":"356.62","x3":"1"},{"type":"PositionA","studentId":"106","Time":"93","x1":"904.1","y1":"416.94","z1":"1.05","x2":"16.85","y2":"0","z2":"353.85","x3":"1"},{"type":"PositionA","studentId":"106","Time":"93.2","x1":"920","y1":"416.94","z1":"1.05","x2":"16.43","y2":"0","z2":"354.27","x3":"1"},{"type":"PositionA","studentId":"106","Time":"93.4","x1":"925","y1":"416.94","z1":"1.05","x2":"16.43","y2":"0","z2":"354.27","x3":"1"}];
data.forEach(function(d,i){
    if(i>0){
    d.x1 = +d.x1;
    d.y1 = +d.y1;
	d.distance = Math.sqrt(Math.pow((d.x1 - data[i-1].x1),2)
        +Math.pow((d.y1 - data[i-1].y1),2));
	}
});
console.log(data)

现在，您可以简单地在数据可视化中使用data的属性distance。

相关文章：