如何将svg圆定位在一条线上并使其弯曲？

Question

我正在制作像 seat.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>

Answer 2

我喜欢@steveladavich 的回答，但我会提出一个替代方案。您可以使用d3 的曲线拟合点的能力，然后将圆圈放置在生成的路径上：

var r = 10,
  points = [];
for (var i = 0; i < 10; i++) {
  points.push({
    x: (500 / 10) * i,
    y: Math.random() * 500
  });
}

var line = d3.line()
  .x(function(d) {
    return d.x;
  })
  .y(function(d) {
    return d.y;
  })
  .curve(d3.curveCardinal);

var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);

var path = svg.append("g")
  .datum(points)
  .append("path")
  .attr("d", line)
  .style("fill", "none")
  .style("stroke", "none")
  .node();

var pathLength = path.getTotalLength();
svg.append("g")
  .selectAll("circle")
  .data(d3.range(0, pathLength, r))
  .enter()
  .append("circle")
  .attr("transform", function(d) {
    var p = path.getPointAtLength(d);
    return "translate(" + p.x + "," + p.y + ")";
  })
  .attr("r", r / 2)
  .style("fill", "steelblue");

<script src="http://d3js.org/d3.v4.js"></script>