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

Question

我有 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);
 });

示例数据：

type 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 900.1 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

Answer 1

您可以使用 forEach 引用数组中的前一个对象。在这里，我新建一个key/value 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。

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

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

javascript

arrays

data-visualization

d3.js