Добавление окружностей к нескольким путям

Привет Я пытаюсь добавить небольшие круги к нескольким линиям пути, а затем перевести по пути. Я пытаюсь получить 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>

источник

2015-01-04 user3202499

Это может быть полезно http://bl.ocks.org/mbostock/1705868 –

Ваш код в основном правильно, за исключением вы применили дополнительное преобразование путей, которые вы не обратились в круги:

.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.

источник

2015-01-04 15:54:06 Mark

Добавление окружностей к нескольким путям

ответ

Смежные вопросы