Javascript 如何在直线上定位svg圆并使其弯曲？

我正在制作一个像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());
});

---

我肯定不知道我是否理解你的问题，但如果你试图沿着曲线定位圆，我建议

写出所需曲线的方程式

将该曲线转换为曲线

用x方程表示cx，用y方程表示cy

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

这是一个非常粗略的例子，供你借鉴

const p_圆={
x（t）{return 100*Math.cos（（t+10）/10）+150}，
y（t）{return 100*Math.sin（（t+10）/10）-80}
}
常数p_抛物={
x（t）{return-（10*t-5）+100}，
y（t）{return-（t-5）*（t-5）+20}
}
设t=Array.prototype.concat(
from（Array（10）.keys（））.map（d=>[d，1]），//第1行
from（Array（10）.keys（））.map（d=>[d，2]），//第2行
from（Array（10）.keys（））.map（d=>[d，3]）//第3行
)
常数p_parab_2={
x（t）{return（10*t-5）+100}，//去掉“-”，使第一个座位在左边，而不是右边
y（t）{return-（t-5）*（t-5）+20}
}
//将第11个座椅添加到座椅5周围的中心（座椅位于中心）
设t2=Array.prototype.concat(
from（Array（11）.keys（））.map（d=>[d，1]），//第1行
from（Array（11）.keys（））.map（d=>[d，2]），//第2行
from（Array（11）.keys（））.map（d=>[d，3]）//第3行
)
console.log（t）
d3.选择（“svg”）.选择全部（“circ”）
.数据（t）
.输入（）
.附加（“圆圈”）
.attr（“类别”、“保监会”）
.attr（“r”，5）
.attr（“填充”、“红色”）
.attr（“cx”，（d）=>p_圆.x（d[0]））
.attr（“cy”，（d）=>p_圆.y（d[0]）+15*d[1]）
d3.选择（“svg”）.选择全部（“2”）
.数据（t2）
.输入（）
.附加（“圆圈”）
.attr（“类别”、“第二类”）
.attr（“r”，7）
.attr（“填充”、“蓝色”）
.attr（“cx”，（d）=>p_parab.x（d[0]））
.attr（“cy”，（d）=>p_抛物线y（d[0]）+15*d[1]）
d3.选择（“svg”）.选择全部（“抛物线”）
.数据（t）
.输入（）
.附加（“圆圈”）
.attr（“类”、“抛物线”）
.attr（“r”，5）
.attr（“填充”、“绿色”）
.attr（“cx”，（d）=>p_parab.x（d[0]））
.attr（“cy”，（d）=>p_parab.y（d[0]）+15*d[1]）

---

我喜欢@steveladavich的答案，但我会提出一个备选答案。您可以使用

d3

的曲线拟合功能来拟合点，然后将圆放置在生成的路径上：

var r=10，
点数=[]；
对于（变量i=0；i<10；i++）{
点。推({
十：（500/10）*i，
y:Math.random（）*500
});
}
var line=d3.line（）
.x（功能（d）{
返回d.x；
})
.y（功能（d）{
返回d.y；
})
.曲线（d3.曲线中心）；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，500）；
var path=svg.append（“g”）
.基准（点）
.append（“路径”）
.attr（“d”，行）
.style（“填充”、“无”）
.style（“笔划”、“无”）
.node（）；
var pathLength=path.getTotalLength（）；
svg.append（“g”）
.selectAll（“圆圈”）
.数据（d3.范围（0，路径长度，r））
.输入（）
.附加（“圆圈”）
.attr（“转换”，函数（d）{
var p=path.getPointAtLength（d）；
返回“translate”（“+p.x+”，“+p.y+”）；
})
.attr（“r”，r/2）
.style（“填充”、“钢蓝”）；

---

我已经读了你的问题3遍，不知道你在问什么。你能创建一些可运行的代码来说明你的问题吗？嗨@Mark，谢谢！我已经创建了一个小提琴，点击绘图和行，你将能够看到它现在的工作情况和formulas@Mark，我一直在使用您提供的解决方案，我有一个问题关于它的估计。你知道如何得到一个对称的结果吗。我需要第一个和最后一个圆在同一水平面上（y轴）。您的评论中提供的解决方案是迄今为止最好的，我非常感谢您的帮助。这是我需要做的最后一件事。我一直在努力，但仍然无法获得这种对称性。这是唯一剩下的东西。嗨@Mark，我想理解这个等式，我可以调整它，使其在30圈直线上完美运行。但是如果ci的数量rcles比它小，例如，10，它不能正常工作。我对数字做了一些调整，但我想让它自动工作，以便无论每条线上有多少个圆圈……我怎么能做到呢？这里有个小问题：要调整圈数，请更改quant_col2变量。@steve ladavich你能帮我做这个吗是的，你已经理解了这个问题，这就是我需要的！但我看到这条曲线在左边悬而未决，我希望最左边和最右边元素的y坐标是相同的…我如何实现它？这与cos和sin值有关系吗？玩一下参数方程和“t”数值，直到你得到它，看看你想要它如何。记住，方程式是绘制曲线的，t值表示你要沿着曲线绘制每个圆的位置。对于这条曲线，t=5是中心座位，但我有座位t=0到t=10（11个座位）.因为我写等式的方式。第0个座位比第10个座位离中心远1个座位，给人的印象是“左悬”--我将添加一个编辑器我刚刚调整了宽度并更改了曲线的一个参数，它工作了。我没有数字的d数据…我试图在我的自动化代码中只输入cy和cx值，但它没有按预期工作。我如何调整它？我已编辑了question@JaquelinePassos，即“.data（）”部分内容是在D3中隐藏for循环/array.prototype.map调用。使用“.data（）.enter（）.append（）”可以为每个seat.Y绘制一个新的圆

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