javascript - 如何在两点之间创建中点？

Question

我正在尝试在三 Angular 形的任意两点之间创建点。如何在两点之间创建中点？例如，我将如何创建一个点 在坐标 (150, 0) 和 (0, 200) 之间？

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

//创建 SVG 容器

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

//绘制路径

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

//设置点

    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];

Answer 1

由于您的 points 数据在三 Angular 形中具有冗余的第四个点(与第一个点相同)，因此我们可以简单地删除数据的第四个对象:

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

甚至不用担心最后数据的范围误差:

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

这是一个演示。蓝点是数据数组的点，红点是中点。

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>

相同的片段，每个三 Angular 形都有线:

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>