将圆圈添加到多个路径答案

【问题标题】：Adding circles to multiple paths将圆圈添加到多个路径
【发布时间】：2015-01-04 05:53:03
【问题描述】：

您好，我正在尝试向多条路径线添加小圆圈，然后在路径上进行平移。我正在尝试获取路径起点的 x pos 和 y pos，但是当我将圆圈附加到它时，它会附加到其他位置。如果您能告诉我如何将圆圈附加到路径的起点，然后将其翻译到路径的终点，我将不胜感激。下面是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>

【问题讨论】：

这可能会有所帮助bl.ocks.org/mbostock/1705868

标签： javascript jquery canvas d3.js visualization

【解决方案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。

【讨论】：