首页 \ 问答 \ 如何在d3.js中为路径上的多个圆圈制作动画?(How to animate multiple circles on a path in d3.js?)

如何在d3.js中为路径上的多个圆圈制作动画?(How to animate multiple circles on a path in d3.js?)

我试图把它作为参考https://bl.ocks.org/mbostock/1705868

我想将多个圆圈旋转为点而不是无限旋转的单个圆圈。

          function translateAlong(path) {
            var l = path.getTotalLength();
            return function(i) {
              return function(t) {
                var p = path.getPointAtLength(t * l);
                return "translate(" + p.x + "," + p.y + ")";//Move marker
              }
            }
          }

我最初在路径上绘制了所有必需的点,如https://jsfiddle.net/tzbd9r1f/2/

我在这里遇到两个问题:

1:当我尝试为所有圆圈设置动画时,我看到只有一个圆形动画而不是5个圆圈,如https://jsfiddle.net/tzbd9r1f/1/

2:如果我试图调用所有5个圆圈的结束转换,我会得到最大的堆栈错误,以防万一这样无限旋转,如https://jsfiddle.net/tzbd9r1f/3/

请指导。


Im trying to take this as reference https://bl.ocks.org/mbostock/1705868.

I want to rotate multiple circle as points instead of single circle rotating above infinitely.

          function translateAlong(path) {
            var l = path.getTotalLength();
            return function(i) {
              return function(t) {
                var p = path.getPointAtLength(t * l);
                return "translate(" + p.x + "," + p.y + ")";//Move marker
              }
            }
          }

I initially plotted all the required points on path as https://jsfiddle.net/tzbd9r1f/2/

Im facing two problems here :

1 : When I try to animate all the circles I see only one circle animating and not 5 circles as here https://jsfiddle.net/tzbd9r1f/1/.

2 : If I try to call end transition for all 5 circle I get maximum stack error in case making this as infinitely rotating as here https://jsfiddle.net/tzbd9r1f/3/

Please guide.


原文:https://stackoverflow.com/questions/39308514
更新时间:2022-02-25 15:02

最满意答案

读取文件时可以这样做:

// create a placeholder for processed lines
List<List<string>> _output = new List<List<string>>();

using (StreamReader reader = new StreamReader(File.OpenRead(filePath)))
{
    int i = 0; // create indexer
    _output.Add(new List<string>()); // add new sequence
    _output.Last().Add(i.ToString() + "."); // insert sequence indexer
    string line = string.Empty;
    while( (line = reader.ReadLine()) != null)
    {
        if(string.IsNullOrWhiteSpace(line))
        {
            i++;
            _output.Add(newList<string>());
            _output.Last().Add(i.ToString() + ".");
        }
        else
        {
            _output.Last().Add(line);
        }
    }
}

然后,您可以使用以下内容将其写入文本文件中:

using (StreamWriter writer = new StreamWriter(File.OpenWrite(filePath)))
{
    foreach(List<string> lines in _output)
    {
        foreach(string line in lines)
        {
            writer.WriteLine(line);
        }
        writer.WriteLine(line);
    }
}

如果这不是一个文件(没有指定),而是string ,你可以使用StringReader而不是StreamReaderStringWriter来代替StreamWriter

对于因“非正则表达式”回答或其他某些其他原因而想要downvote的其他人...

进行比较


You can do this while reading the file :

// create a placeholder for processed lines
List<List<string>> _output = new List<List<string>>();

using (StreamReader reader = new StreamReader(File.OpenRead(filePath)))
{
    int i = 0; // create indexer
    _output.Add(new List<string>()); // add new sequence
    _output.Last().Add(i.ToString() + "."); // insert sequence indexer
    string line = string.Empty;
    while( (line = reader.ReadLine()) != null)
    {
        if(string.IsNullOrWhiteSpace(line))
        {
            i++;
            _output.Add(newList<string>());
            _output.Last().Add(i.ToString() + ".");
        }
        else
        {
            _output.Last().Add(line);
        }
    }
}

Then you can write this into a text file using :

using (StreamWriter writer = new StreamWriter(File.OpenWrite(filePath)))
{
    foreach(List<string> lines in _output)
    {
        foreach(string line in lines)
        {
            writer.WriteLine(line);
        }
        writer.WriteLine(line);
    }
}

If that's not a file ( which was not specified ) but string instead, you can use StringReader instead of StreamReader and StringWriter instead of StreamWriter.

For everyone else that want to downvote because of "non-regex" answer or some other b....

Make your comparison

相关问答

更多

相关文章

更多

最新问答

更多
  • 获取MVC 4使用的DisplayMode后缀(Get the DisplayMode Suffix being used by MVC 4)
  • 如何通过引用返回对象?(How is returning an object by reference possible?)
  • 矩阵如何存储在内存中?(How are matrices stored in memory?)
  • 每个请求的Java新会话?(Java New Session For Each Request?)
  • css:浮动div中重叠的标题h1(css: overlapping headlines h1 in floated divs)
  • 无论图像如何,Caffe预测同一类(Caffe predicts same class regardless of image)
  • xcode语法颜色编码解释?(xcode syntax color coding explained?)
  • 在Access 2010 Runtime中使用Office 2000校对工具(Use Office 2000 proofing tools in Access 2010 Runtime)
  • 从单独的Web主机将图像传输到服务器上(Getting images onto server from separate web host)
  • 从旧版本复制文件并保留它们(旧/新版本)(Copy a file from old revision and keep both of them (old / new revision))
  • 西安哪有PLC可控制编程的培训
  • 在Entity Framework中选择基类(Select base class in Entity Framework)
  • 在Android中出现错误“数据集和渲染器应该不为null,并且应该具有相同数量的系列”(Error “Dataset and renderer should be not null and should have the same number of series” in Android)
  • 电脑二级VF有什么用
  • Datamapper Ruby如何添加Hook方法(Datamapper Ruby How to add Hook Method)
  • 金华英语角.
  • 手机软件如何制作
  • 用于Android webview中图像保存的上下文菜单(Context Menu for Image Saving in an Android webview)
  • 注意:未定义的偏移量:PHP(Notice: Undefined offset: PHP)
  • 如何读R中的大数据集[复制](How to read large dataset in R [duplicate])
  • Unity 5 Heighmap与地形宽度/地形长度的分辨率关系?(Unity 5 Heighmap Resolution relationship to terrain width / terrain length?)
  • 如何通知PipedOutputStream线程写入最后一个字节的PipedInputStream线程?(How to notify PipedInputStream thread that PipedOutputStream thread has written last byte?)
  • python的访问器方法有哪些
  • DeviceNetworkInformation:哪个是哪个?(DeviceNetworkInformation: Which is which?)
  • 在Ruby中对组合进行排序(Sorting a combination in Ruby)
  • 网站开发的流程?
  • 使用Zend Framework 2中的JOIN sql检索数据(Retrieve data using JOIN sql in Zend Framework 2)
  • 条带格式类型格式模式编号无法正常工作(Stripes format type format pattern number not working properly)
  • 透明度错误IE11(Transparency bug IE11)
  • linux的基本操作命令。。。