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 here。

更新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 here。