showMap/javascript.js at master · SlamProblemTcc/showMap · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
"use strict";

function drawLinks() {
  for (var i = 0; i < circlesPositionArray.length - 1; i++) {
    var link = {
      source: circlesPositionArray[i],
      target: circlesPositionArray[i + 1]
    }

    d3.selectAll("svg")
      .append("line")
      .attr("class", "link")
      .attr("x1", link.source.x)
      .attr("y1", link.source.y)
      .attr("x2", link.target.x)
      .attr("y2", link.target.y)
      .attr("id", "link" + i);
  }
}

function assembleObjects(data) {
  var posX = data.pontoX;
  var posY = data.pontoY;
  for (var i = 0; i < posX.length; i++) {
    circlesPositionArray.push({
      x: (width / 2) + (posX[i])*10,
      y: (height / 2) - (posY[i])*10
    })
  }
  console.log(circlesPositionArray);

}

function drawCircles() {

  d3.select("body")
    .selectAll("div")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .style("border", "1px solid black");

  d3.selectAll("svg")
    .append("rect")
    .attr("x", width/2-275)//fazendo com que o meio da caixa fique no lugar certo
    .attr("y", height/2-225)//fazendo com que o meio da caixa fique no lugar certo
    .attr("width", 550)
    .attr("height", 450)
    .attr("class", "box");

  for (var i = 0; i < circlesPositionArray.length; i++) {
    d3.selectAll("svg")
      .append("circle")
      .attr("cx", circlesPositionArray[i].x)
      .attr("cy", circlesPositionArray[i].y)
      .attr("r", radius)
      .attr("id", "circle" + i)
      .attr("class", "dot")
      .append("title")
      .text(circlesPositionArray[i].x+","+circlesPositionArray[i].y);
  }

}

function drawCartesianPlot() {
  d3.selectAll("svg")
    .append("line")
    .attr("class", "link_cartesian")
    .attr("x1", (width / 2))
    .attr("y1", 0)
    .attr("x2", (width / 2))
    .attr("y2", height);

  d3.selectAll("svg")
    .append("line")
    .attr("class", "link_cartesian")
    .attr("x1", 0)
    .attr("y1", height / 2)
    .attr("x2", width)
    .attr("y2", height / 2);
}

$.getJSON('mapa.json', function(data){
  console.log(data.pontoX);

  assembleObjects(data);
  drawCircles();
  drawLinks();
  drawCartesianPlot();
});