javascript - 将圆添加到多个路径-6ren

javascript - 将圆添加到多个路径

转载作者：行者123 更新时间：2023-11-28 00:42:41

24

4

嗨，我正在尝试向多条路径线添加小圆圈，然后在路径上平移。我试图获取路径起点的 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>

最佳答案

您的代码基本上是正确的，只是您在未应用于圈子的路径上应用了额外的转换:

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

关于javascript - 将圆添加到多个路径，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27762837/

24

4

0

文章推荐： jquery - 对每个产品使用 .each() 一次来插入新价格

文章推荐： html - 在什么时候请求图像文件比内联 base64 编码更快？

带有渐变尾部的笔划的 SVG 圆
以下是我所拥有的。我唯一需要的是让顶部填充。所以 12 点钟它应该是一个填充，广告 6 点钟它应该以渐变结束。实现这一目标的最佳方法是什么？ (这个想法是让它在下一步中旋转。) Codepen
jquery Canvas 圆
我用 Canvas 绘制了倒计时工作代码:http://jsfiddle.net/ajFsx/ window.onload = function() { canvas = document
dart - 如何在stageXL中创建线，圆？
我是stagexl的新手，我知道这是非常基本的问题，但是我找不到真正快速的答案，因此我认为将这个答案提供给与我处于同一职位的任何人都很好。如何在stagexl中创建从x到y的线？以及如何创建一个以
php - 圆 Angular
我想知道以编程方式为图像制作圆 Angular 的最佳方法是什么。这可以使用 PHP 或 javascript。一个算法也可以做同样的事情，我可以用 Image::Magick 或 GD 对其进行编码
html - css3中的多个完美环/圆
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 8 年前。 Improve this q
algorithm - 包含一组点的三角形/圆
我有一组二维点。我想找到: 包含所有点的最小三角形包含所有点的最小圆。是否有任何算法可以做到这一点？我遇到了 Convex Hull 来为一组点拟合凸多边形。但我想要一个圆形和三角形。提前致谢
algorithm - 圆-圆交点
如何计算两个圆的交点。我希望在所有情况下都有两个、一个或没有交点。我有中心点的 x 和 y 坐标，以及每个圆的半径。 Python 中的答案是首选，但任何可用的算法都是可以接受的。最佳答案 Int
c++ - Qt画一个带孔的环/圆
我需要用 QPainter 画一个圆。当我像这样使用 drawEllipse 函数时: void UserClass::Draw(QPainter &painter) { painter.sa
python - 圆-多边形交点
计算几何问题: 在多边形(例如BCDE)的边(例如EB)上随机选择点P0，以找到可能的点(即, P1,P2,P3,...) 基于给定距离(即 r)在其他边上。下面的演示展示了一个解决方案，它通过找到以
javascript - 圆 Angular
这个问题在这里已经有了答案: 关闭 13 年前。重复: What is the best way to create rounded corners How to make a cross bro
CSS 圆 Angular 模糊边框
我有一个 ionic4 应用程序，我需要在其中实现类似于下面卡片中的 img 效果。在边缘模糊到中心，然后在中心用另一个白色边框清除我怎样才能做到这一点？请忽略编辑图标最佳答案 .card
css - 使用组元素旋转 SVG 圆
我想旋转一个 SVG 圆圈，同时保持其他元素不旋转当我尝试使用 rotateZ(15deg) 旋转圆(白色)时，这就是我得到的: 这是我目前的进展: https://jsfiddle.net/41h
javascript - MapboxGL 挤出线/圆
我正在尝试根据时间戳实现 LineString 挤压。正如 github 中提到的，它应该被实现，但事实并非如此。它应该类似于下面的屏幕截图。到目前为止，我发现可以对多边形使用挤压，但随后我必须以某
javascript - 如何将文本设置为 Canvas 圆
我用了this question我创建了像this这样的形状但现在我不知道如何在第一次单击时为每个圆圈设置文本？ (如井字棋) 最佳答案给你! - 为了方便起见，我合并了它。只需单击圆圈即可查看其上
geometry - 圆-矩形碰撞检测(交叉点)
如何判断圆和矩形在二维欧几里得空间中是否相交？ (即经典的二维几何) 最佳答案这是我的做法: bool intersects(CircleType circle, RectType rect) {
java - 圆-圆碰撞预测(后续)
圆 A 沿 x 轴向右移动。圆 B 沿 y 轴向上移动。我想知道他们是否会发生碰撞。 (不是何时，只是如果。) 半径相同，恒速度不同。 This answer似乎解决了这个问题，我的问题最好应该是这个
html - 圆 Angular div显示较小尺寸的边缘
Relevant Codesandbox 我一直在我的应用程序中看到一种模式，当我创建圆形的div时，当它们的尺寸较小时，它们有时似乎具有边缘。请参见下面突出显示的代码的图像。为什么会发生这种情况，有
javascript - 圆 Angular 变成矩形？
目前，我在 c3.js 中生成的图表图例是颜色矩形，我想将其更改为圆形。我该怎么做？ var chart = c3.generate({ data: { columns: [
图像的 Javascript 圆 Angular
我需要显示带有圆 Angular 的图像。很久以前，我看到一个网站使用 javascript 库执行此操作，该库将圆 Angular 图像覆盖在普通图像上。我们是否有任何 javascript 库(
JavaFX 圆 Angular 碰撞箱
在我的程序中，我使用 css 设计了我的按钮样式。我正在使用“-fx-background-radius”来圆 Angular ，并注意到当我将鼠标悬停在原来的 Angular 上时，它允许我单击按钮

首页

博学

6Ren·AI

商城

javascript - 将圆添加到多个路径