elements on ellipse edge in d3js

Question

I try put images to oval edge. But they are to a large extent on the poles. I have oval:

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

and i have image coordinates:

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

How can I arrange them evenly? enter image description here

`this.angle = Math.PI * 2 / (this.circleData.length);var that = this; for (var j = 0; j < length; j++) {...}` — NickDevil, Jul 07 '15 at 14:10
possible duplicate of [How can I generate a set of evenly distributed points around an ellipse?](http://stackoverflow.com/questions/6972331/how-can-i-generate-a-set-of-evenly-distributed-points-around-an-ellipse) — Paul LeBeau, Jul 07 '15 at 14:39
I think the Gabriel's answer was right, it is better to mark that as the best answer! — Saman Gholami, Jul 08 '15 at 19:06

Gabriel · Accepted Answer · 2015-07-07T16:20:01.227

You cannot add image to ellipse tag but you can set image to ellipse background, to add picture to position you mention, Create circle then set image to background of them like this :

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

To get the real position you have to change Polar angle to Cartesian.

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;

Update 2

I create a sample like you asked, Hope to help you.

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

This function return position on ellipse with specific degree:

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

Complete jsfiddle here.

Update 3

I made some changes to PolarToCartesian() function and it make the ellipse better.I changed the begin Angle to -90 and it's seem better.

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

Complete jsfiddle here.

i know it! But the circles gets close to the poles , and the middle is empty — NickDevil, Jul 07 '15 at 14:21
If still have problem update your question with your complete code to find error, here is some parameter that I don't know what is it such as : `j` or `rx` or `radius`. — Gabriel, Jul 07 '15 at 14:30
`this.rx = this.svgWidth / 2 - 50; this.ry = this.svgHeight / 2 - 80; radius = 50;` and J - iterator to loop through an array with data for pictures — NickDevil, Jul 07 '15 at 14:41
@Gabrel Thank you! Your variant is better, but if ellipse is big, most circles still near the pole - http://jsfiddle.net/xLw9f2j1/2/ — NickDevil, Jul 07 '15 at 15:38
It's because of the different between `rx `and `ry`. if they have little difference ellipse will be like circle and all the circle will arrange in same difference. could you explain what exactly you looking for? — Gabriel, Jul 07 '15 at 15:55

elements on ellipse edge in d3js

1 Answers1