将圆圈添加到多条路径

Question

您好，我正在尝试将小圆圈添加到多条路径线，然后在路径上平移。我正在尝试获取路径起点的 x 位置和 y 位置，但是当我将圆附加到它时，它会附加到其他位置。如果您能告诉我如何将圆附加到路径起点，然后将其转换到路径终点，我将不胜感激。下面是 jsfiddle http://jsfiddle.net/4rsr098o/

<!DOCTYPE html>
 <meta charset="utf-8">
 <title></title>
<style>

body {
background: #012;
}

path {
fill: none;
stroke: white;
stroke-opacity: .5;
 stroke-width: 5;
}

</style>
<body>
 <script src="js/libs/d3/d3.v3.js"></script>
<script>

var width = 3260,
height = 3500;
var StartPos;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
 .append("g")
 .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var gradient = svg.append("defs").append("linearGradient")
.attr("id", "gradient")
.attr("x1", "0%")
.attr("y1", "20%")
.attr("x2", "20%")
.attr("y2", "100%");

 gradient.append("stop")
.attr("offset", "20%")
.attr("stop-color", "#ccf");

 gradient.append("stop")
.attr("offset", "50%")
.attr("stop-color", "#1C425C");

 gradient.append("stop")
.attr("offset", "100%")
.attr("stop-color", "#19162B");



 // could use transparent gradient overlay to vary raindrop color
 var path1=svg.selectAll("path")
.data(d3.range(15))
.enter().append("path")

.attr("d", function(d) { return raindrop(d); })
 .attr("transform", function(d) {
 return "rotate(" + d + ")"
     + "translate(" + (d) + ",0)"
    + "rotate(90)";
 });


function raindrop(size) {
 // console.log(size);
var r = 100+10*size;

  return "M" + r + ","+ -size*4
 + "C" + -(90-22*size) + "," + -(90-10*size) + " 0," + -470 + " 200," + -(600+size*4);



};

  var pathEl ;
test();
function test(){

pathEl = svg.selectAll("path").each(function(d,i){
var test= this.getTotalLength();  
StartPos=this.getPointAtLength(0);
var EndPos=this.getPointAtLength(test);
console.log(test);
console.log("("+StartPos.x+","+StartPos.y+")");
console.log("("+EndPos.x+","+EndPos.y+")");
addCircle();
});
}
function addCircle(){
       svg.append("circle")
    .attr("opacity", 1)
    .attr("cx", StartPos.x)
    .attr("cy", StartPos.y)
.attr("r", 4)
    .attr("fill", "white");
  }
</script>

Answer 1

你的代码基本上是正确的，除了你对没有应用到你的圈子的路径应用了额外的转换：

.attr("transform", function(d) {
    return "rotate(" + d + ")" + "translate(" + (d) + ",0)" + "rotate(90)";
});

这里有一些快速编辑，可以将圆圈放在路径的开头：

function test() {
  svg.selectAll("path").each(function(d, i) {
    var trans = d3.select(this).attr("transform");
    var totLength = this.getTotalLength();
    pos = this.getPointAtLength(0);
    addCircle(pos, trans);
  });
}

function addCircle(pos, trans) {
  svg.append("circle")
    .attr("opacity", 1)
    .attr("cx", pos.x)
    .attr("cy", pos.y)
    .attr("transform", trans)
    .attr("r", 4)
    .attr("fill", "white");
}

例子here.

将圆圈添加到多条路径

Adding circles to multiple paths

javascript

jquery

visualization

canvas

d3.js