d3js中椭圆边缘上的元素

Question

我尝试将图像放置在椭圆形边缘。 但是它们在很大程度上是两极的。 我有椭圆形：

  var oval = group.append("ellipse")
            .attr("cx", this.svgWidth / 2)
            .attr("cy", this.svgHeight / 2)
            .attr("rx", this.rx)
            .attr("ry", this.ry)
            .style("stroke", "#BCBBB6")
            .style("stroke-width", "3px")
            .style("fill", "transparent");

我有图像坐标：

var imgX = Math.cos(that.angle * j) * that.rx - this.model.radius;
var imgY = Math.sin(that.angle * j) * that.ry - this.model.radius;

如何均匀地排列它们？

Answer 1

您不能将图像添加到ellipse标记，但可以将图像设置为椭圆背景，以将图片添加到您提到的位置，创建circle然后将图像设置为它们的背景，如下所示：

var oval = group.append("ellipse")
        .attr("cx", this.svgWidth / 2)
        .attr("cy", this.svgHeight / 2)
        .attr("rx", this.rx)
        .attr("ry", this.ry)
        .style("stroke", "#BCBBB6")
        .style("stroke-width", "3px")
        .style("fill", "transparent");

oval.selectAll("circle")
        .append("circle")
        .attr("cx" ,imgX )
        .attr("cy",imgY)
        .attr("r","8px")
        .attr("fill","Url(#img)");

var imgX = Math.cos(that.angle * j) * that.rx - this.model.radius;
var imgY = Math.sin(that.angle * j) * that.ry - this.model.radius;

UPDATE1

要获得实际位置，必须将极角更改为笛卡尔角。

var imgX = Math.cos((that.angle)*Math.PI * j/180.0) * that.rx - this.model.radius;
var imgY = Math.sin((that.angle)*Math.PI * j/180.0) * that.ry - this.model.radius;  

更新2

我按照您的要求创建了一个样本，希望对您有所帮助。

    var width = 600, height = 600;
    var rx = 200, ry = 150;
    var circleNumbers = 20;

    var svg = d3.select("body").append("svg")
        .attr("width", width).attr("height", height)
        .attr("transform", "translate(0,150)");

    var ellipse = svg.append("ellipse")
        .attr("cx", width / 2)
        .attr("cy", height / 2)
        .attr("rx", rx)
        .attr("ry", ry)
        .style("stroke", "#BCBBB6")
        .style("stroke-width", "3px")
        .style("fill", "transparent");
    var degree = 360 / circleNumbers;

    for (var i = 0; i < circleNumbers; i++) {
        var circlePosition = polarToCartesian(width / 2, height / 2, rx, ry, i * degree);
        svg.append("circle")
            .attr("cx", circlePosition.x)
            .attr("cy", circlePosition.y)
            .attr("r", "8px")
            .attr("fill", "red");
    }

此函数在椭圆上以特定程度返回位置：

     function polarToCartesian(centerX, centerY, radiusX, radiusY, angleInDegrees) {

        var angleInRadians = (angleInDegrees* Math.PI / 180.0);


        return {
            x: centerX + (radiusX * Math.cos(angleInRadians)),
            y: centerY + (radiusY * Math.sin(angleInRadians))
        };
    }

在此处完成jsfiddle。

更新3

我对PolarToCartesian()函数进行了一些更改，使椭圆变得更好。我将开始角度更改为-90 ，看起来似乎更好。

        function polarToCartesian(centerX, centerY, radiusX, radiusY, angleInDegrees) {

        var angleInRadians = ((angleInDegrees-90)* Math.PI / 180.0);


        return {
            x: centerX + (radiusX * Math.cos(angleInRadians)),
            y: centerY + (radiusY * Math.sin(angleInRadians))
        };
    }

在此处完成jsfiddle。