CODEWITHSUNDEEP
javascriptd3.jssvg
Rafiq Muntaqim
Rafiq Muntaqim

Reputation: 13

How do i create mid-points between 2 points?

I'm trying to create points between any 2 points of my triangle. How do i create mid-points between 2 points? For example, how would i create a point between the coordinates (150, 0) and (0, 200)? 

var points = [
      {"x": 150, "y": 0},
       {"x": 0, "y": 200},
       {"x": 300, "y": 200},  
       {"x": 150, "y": 0}
      ];

//CREATE THE SVG CONTAINER

    var svg = d3.select("body").append("svg")
        .attr("width", 500)
        .attr("height", 500)
        .style('fill', '#113F8C')
        .style('padding-left', '20px')
        .style('padding-top', '5px');

// DRAW THE PATH

    var path = svg.append("path")
        .data([lineData])
        .attr("stroke", "black")
        .attr("stroke-width", 3)
        .attr("d", d3.line());

//SET THE POINTS 

    svg.selectAll("circle")
      .data(points)
      .enter().append("circle")
      .attr("cx", function(d) {
        console.log(d.x+ " hello");

        for (var i = 0; i < points.length; i++) {
          //console.log(points[i]);
          x[i] = d.x;
          console.log(d.x);
        };

         return d.x; 

    })
      .attr("cy", function(d) {console.log(d.y+ " hello"); return d.y; })
      .attr("r", 5);

      // THE X TEST
      x[0];

Upvotes: 0

Views: 155

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102219

Since you have a points data with a redundant fourth point in the triangle (which is the same of the first), we can simply remove this fourth object of the data:

.data(points.slice(0, points.length-1))

And don't even mind about the range error of the last data:

.attr("cx", (d,i)=>(d.x + points[i+1].x)/2)
.attr("cy", (d,i)=>(d.y + points[i+1].y)/2);

Here is a demo. The blue points are the points of your data array, the red points are the mid points.

var svg = d3.select("body")
	.append("svg")
	.attr("width", 400)
	.attr("height", 300);
	
var points = [
      {"x": 150, "y": 10},
       {"x": 10, "y": 200},
       {"x": 300, "y": 200},  
       {"x": 150, "y": 10}
      ];
			
var circles = svg.selectAll(".circles")
	.data(points)
	.enter()
	.append("circle")
	.attr("r", 5)
	.attr("fill", "blue")
	.attr("cx", d=>d.x)
	.attr("cy", d=>d.y);
	
var midPoints = svg.selectAll(".midPoints")
	.data(points.slice(0, points.length-1))
	.enter()
	.append("circle")
	.attr("r", 5)
	.attr("fill", "brown")
	.attr("cx", (d,i)=>(d.x + points[i+1].x)/2)
	.attr("cy", (d,i)=>(d.y + points[i+1].y)/2);
<script src="https://d3js.org/d3.v4.min.js"></script>

The same snippet, with lines for each triangle:

var svg = d3.select("body")
	.append("svg")
	.attr("width", 400)
	.attr("height", 300);
	
var points = [
      {"x": 150, "y": 10},
       {"x": 10, "y": 200},
       {"x": 300, "y": 200},  
       {"x": 150, "y": 10}
      ];

var line = d3.line()
  .x(d=>d.x)
  .y(d=>d.y);

var lineMid = d3.line()
  .x((d,i)=>(d.x + points[i+1].x)/2)
  .y((d,i)=>(d.y + points[i+1].y)/2)
  .curve(d3.curveLinearClosed);

var lineCircles = svg.append("path")
  .attr("d", line(points))
  .attr("fill", "none")
  .attr("stroke", "blue")
  .attr("opacity", 0.4);

var lineMidPoints = svg.append("path")
  .attr("d", lineMid(points.slice(0, points.length-1)))
  .attr("fill", "none")
  .attr("stroke", "brown")
  .attr("opacity", 0.4);
			
var circles = svg.selectAll(".circles")
	.data(points)
	.enter()
	.append("circle")
	.attr("r", 5)
	.attr("fill", "blue")
	.attr("cx", d=>d.x)
	.attr("cy", d=>d.y);
	
var midPoints = svg.selectAll(".midPoints")
	.data(points.slice(0, points.length-1))
	.enter()
	.append("circle")
	.attr("r", 5)
	.attr("fill", "brown")
	.attr("cx", (d,i)=>(d.x + points[i+1].x)/2)
	.attr("cy", (d,i)=>(d.y + points[i+1].y)/2);
<script src="https://d3js.org/d3.v4.min.js"></script>

Upvotes: 1

Related Questions