javascript - 如何将 svg 圆定位在一条直线上并弯曲它？

Question

我正在制作一个类似 seats.io 的软件，我正在尝试使圆圈的线弯曲。我首先使用 d3.js 创建一个带有 svg 圆圈的正方形。

y坐标

我首先找到中间的圆并将其 cy 设置为 0，然后按顺序设置后续圆(每行递增 12。然后我意识到，如果它是偶数，则无法找到中间点。

我已经决定使用 bhaskara 公式来查找曲线坐标，但我仍然不知道如何将它定位在循环中:

$("#curve").on("change",function(){
    var a = $(this).val();
    var q = quant_col2;

    console.log(q);
    console.log(quant_line2);

    var half = Math.round(quant_col2/2) - 1;

    console.log("media: " + half);

    var value = 0;

    var circles = svg.selectAll("circle").attr("cy", function(d, i){

        var cy = $(this).attr("cy");

        var resultado = baskara(quant_col2,quant_line2,0);

        var xv = -Math.abs(quant_line2)/(2 * quant_col2);

        var xy = -Math.abs(delta(quant_col2,quant_line2,0))/4 * quant_col2;


        if(i < q){
            if(i  == half) {
                return value;
            }
        }
        if(i == q - 1){
            half = half + quant_col2;
            q = q + quant_col2;
            value = value + 12;
            return cy;
        }

        return cy;
    });

    console.log($(this).val());
});

如何让它弯曲并且圆圈正确定位？感谢您的帮助。

编辑 1:没有数据参数的代码

var curva = svg.selectAll("circle")
        .attr("cx", function(d,i) { 
            var cx = $(this).attr("cx");
            return p_parab.x(cx);
        })
        .attr("cy", function(d,i) { 
            var cy = $(this).attr("cy");    
            return p_parab.y(cy) + 15* cy;
        });

Answer 1

我绝对不确定我是否理解你的问题，但如果你试图沿着曲线放置圆圈，我建议......

1. 写出你想要的曲线方程
2. 将该曲线转换为 parametric equation
3. 对cx使用x方程，对cy使用y方程

参数方程将为您提供单行。对于每个额外的行，您需要考虑该行中所有 cy 的额外偏移量。

这是一个非常粗略的示例，供您构建......

const p_circle = {
  x(t){ return 100*Math.cos((t+10)/10)+150 },
  y(t){ return 100*Math.sin((t+10)/10)-80 }
}

const p_parab = {
  x(t){ return -(10*t-5)+100 },
  y(t){ return -(t-5)*(t-5)+20 }
}



let t = Array.prototype.concat(
  Array.from(Array(10).keys()).map(d=>[d,1]), //row 1
  Array.from(Array(10).keys()).map(d=>[d,2]), //row 2
  Array.from(Array(10).keys()).map(d=>[d,3])  //row 3
)


const p_parab_2 = {
  x(t){ return (10*t-5)+100 }, // removing "-" so that first seat is on left, not right
  y(t){ return -(t-5)*(t-5)+20 }
}

// adding 11th seat to center around seat 5 (seat in the center)
let t2 = Array.prototype.concat(
  Array.from(Array(11).keys()).map(d=>[d,1]), //row 1
  Array.from(Array(11).keys()).map(d=>[d,2]), //row 2
  Array.from(Array(11).keys()).map(d=>[d,3])  //row 3
)

console.log(t)

d3.select("svg").selectAll(".circ")
  .data(t)
  .enter()
  .append("circle")
    .attr("class", "circ")
    .attr("r",5)
    .attr("fill","red")
    .attr("cx", (d) => p_circle.x(d[0]))
    .attr("cy", (d) => p_circle.y(d[0]) + 15*d[1])

d3.select("svg").selectAll(".parab2")
  .data(t2)
  .enter()
  .append("circle")
    .attr("class", "parab2")
    .attr("r",7)
    .attr("fill","blue")
    .attr("cx", (d) => p_parab.x(d[0]))
    .attr("cy", (d) => p_parab.y(d[0]) + 15*d[1])

d3.select("svg").selectAll(".parab")
  .data(t)
  .enter()
  .append("circle")
    .attr("class", "parab")
    .attr("r",5)
    .attr("fill","green")
    .attr("cx", (d) => p_parab.x(d[0]))
    .attr("cy", (d) => p_parab.y(d[0]) + 15*d[1])

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<svg height="250" width="250"></svg>