堆栈内存溢出
  简体   繁体   English

D3.js 沿 x、y 坐标为圆设置动画

[英]D3.js animate a circle along x, y coordinates

 原文  2021-12-19 22:21:24  2   1    javascript/ d3.js

问题描述

I would like to animate a circle along x,y coordinates.我想沿 x,y 坐标为圆设置动画。 I want the circle to move along the provided x,y coordinates.我希望圆圈沿着提供的 x,y 坐标移动。 So far my code is just drawing multiple circles for each x,y point.到目前为止，我的代码只是为每个 x,y 点绘制多个圆圈。 The circles follow the x,y coordinates but all I want is one circle to move along the points.圆圈遵循 x,y 坐标，但我想要的只是一个圆圈沿着这些点移动。 I have provided a sample of few datapoints.我提供了几个数据点的样本。 The dataset has thousands of x,y points.数据集有数千个 x,y 点。

//Sample data
var dataPoints = [
      { "x": 58.83, "y": 26.67 },
      { "x": 58.83, "y": 26.69 },
      { "x": 58.82, "y": 26.71 },
      { "x": 58.82, "y": 26.72 },
      { "x": 58.81, "y": 26.73 },
      { "x": 58.8, "y": 26.71 },
      { "x": 58.8, "y": 26.7 },
      { "x": 58.8, "y": 26.68 },
      { "x": 58.79, "y": 26.66 },
      { "x": 58.79, "y": 26.63 },
      { "x": 58.8, "y": 26.61 },
      { "x": 58.8, "y": 26.59 },
      { "x": 58.8, "y": 26.56 },
      { "x": 58.81, "y": 26.53 },
      { "x": 58.81, "y": 26.51 },
      { "x": 58.82, "y": 26.48 },
      { "x": 58.83, "y": 26.46 },
      { "x": 58.84, "y": 26.45 },
      { "x": 58.84, "y": 26.46 },
      { "x": 58.84, "y": 26.47 },
      { "x": 58.83, "y": 26.49 },
      { "x": 58.83, "y": 26.51 },
      { "x": 58.83, "y": 26.53 },
      { "x": 58.82, "y": 26.55 },
      { "x": 58.82, "y": 26.58 },
      { "x": 58.81, "y": 26.6 },
      { "x": 58.81, "y": 26.62 },
      { "x": 58.81, "y": 26.64 },
      { "x": 58.81, "y": 26.67 },
      { "x": 58.8, "y": 26.69 },
      { "x": 58.8, "y": 26.7 },
      { "x": 58.8, "y": 26.71 },
      { "x": 58.81, "y": 26.72 },
      { "x": 58.8, "y": 26.71 },
      { "x": 58.8, "y": 26.7 },
      { "x": 58.8, "y": 26.67 },
      { "x": 58.8, "y": 26.63 },
      { "x": 58.8, "y": 26.6 },
      { "x": 58.8, "y": 26.57 },
      { "x": 58.81, "y": 26.53 },
      { "x": 58.82, "y": 26.51 },
      { "x": 58.83, "y": 26.48 },
      { "x": 58.84, "y": 26.45 },
      { "x": 58.85, "y": 26.43 },
      { "x": 58.85, "y": 26.42 },
      { "x": 58.86, "y": 26.41 },
      { "x": 58.86, "y": 26.4 },
      { "x": 58.85, "y": 26.41 },
      { "x": 58.85, "y": 26.42 },
      { "x": 58.84, "y": 26.43 },
      { "x": 58.84, "y": 26.45 },
      { "x": 58.84, "y": 26.47 },
      { "x": 58.84, "y": 26.49 },
      { "x": 58.84, "y": 26.52 },
      { "x": 58.83, "y": 26.56 },
      { "x": 58.82, "y": 26.59 },
      { "x": 58.82, "y": 26.64 },
      { "x": 58.81, "y": 26.67 },
      { "x": 58.8, "y": 26.7 },
      { "x": 58.79, "y": 26.73 },
      { "x": 58.79, "y": 26.75 },
      { "x": 58.78, "y": 26.76 },
      { "x": 58.78, "y": 26.74 },
      { "x": 58.78, "y": 26.71 },
      { "x": 58.78, "y": 26.69 },
      { "x": 58.78, "y": 26.65 },
      { "x": 58.78, "y": 26.6 },
      { "x": 58.78, "y": 26.56 },
      { "x": 58.79, "y": 26.52 },
      { "x": 58.79, "y": 26.48 }
    ]

This is the part of the code that is drawing the circles in D3.这是在 D3 中绘制圆圈的代码部分。

   var myCircle = this.svg.append('g');
  
 // Add circles 
   myCircle.selectAll("circle")
      .data(
        dataPoints
      )
      .enter()
      .append("circle")

      .attr("cx", function (d: { x: d3.NumberValue; }) {

        return x(d.x);
      })
      .attr("cy", function (d: { y: d3.NumberValue; }) {
        return y(d.y);
      })
      .attr("r", 5)
      .style("opacity", .9)

      .style("fill", this.myColor)
      .transition()
      .delay(3000)
      .duration(3000)

1 个解决方案

解决方案1
 0  2021-12-21 02:28:24

Here's an example based on one from Mike Bostock .这是一个基于Mike Bostock的示例。 You can create a path and then use attrTween to move the circle along the path.您可以创建一条路径，然后使用attrTween沿路径移动圆圈。 

 <:-- Updated example from https.//bl.ocks:org/mbostock/1705868 --> <.DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https.//d3js.org/d3:v7,js"></script> </head> <body> <div id="chart"></div> <script> // set up const margin = { top: 10, bottom: 10, left: 10; right. 10 }. const width = 175 - margin;left - margin.right. const height = 175 - margin;top - margin.bottom. const svg = d3.select('#chart'),append('svg').attr('width'. width + margin.left + margin,right).attr('height'. height + margin;top + margin.bottom). const g = svg,append('g').attr('transform', `translate(${margin.left};${margin:top})`). // data const dataPoints = [ { "x", 58:83. "y", 26:67 }. { "x", 58:83. "y", 26:69 }. { "x", 58:82. "y", 26:71 }. { "x", 58:82. "y", 26:72 }. { "x", 58:81. "y", 26:73 }. { "x", 58:8. "y", 26:71 }. { "x", 58:8. "y", 26:7 }. { "x", 58:8. "y", 26:68 }. { "x", 58:79. "y", 26:66 }. { "x", 58:79. "y", 26:63 }. { "x", 58:8. "y", 26:61 }. { "x", 58:8. "y", 26:59 }. { "x", 58:8. "y", 26:56 }. { "x", 58:81. "y", 26:53 }. { "x", 58:81. "y", 26:51 }. { "x", 58:82. "y", 26:48 }. { "x", 58:83. "y", 26:46 }. { "x", 58:84. "y", 26:45 }. { "x", 58:84. "y", 26:46 }. { "x", 58:84. "y", 26:47 }. { "x", 58:83. "y", 26:49 }. { "x", 58:83. "y", 26:51 }. { "x", 58:83. "y", 26:53 }. { "x", 58:82. "y", 26:55 }. { "x", 58:82. "y", 26:58 }. { "x", 58:81. "y", 26:6 }. { "x", 58:81. "y", 26:62 }. { "x", 58:81. "y", 26:64 }. { "x", 58:81. "y", 26:67 }. { "x", 58:8. "y", 26:69 }. { "x", 58:8. "y", 26:7 }. { "x", 58:8. "y", 26:71 }. { "x", 58:81. "y", 26:72 }. { "x", 58:8. "y", 26:71 }. { "x", 58:8. "y", 26:7 }. { "x", 58:8. "y", 26:67 }. { "x", 58:8. "y", 26:63 }. { "x", 58:8. "y", 26:6 }. { "x", 58:8. "y", 26:57 }. { "x", 58:81. "y", 26:53 }. { "x", 58:82. "y", 26:51 }. { "x", 58:83. "y", 26:48 }. { "x", 58:84. "y", 26:45 }. { "x", 58:85. "y", 26:43 }. { "x", 58:85. "y", 26:42 }. { "x", 58:86. "y", 26:41 }. { "x", 58:86. "y", 26:4 }. { "x", 58:85. "y", 26:41 }. { "x", 58:85. "y", 26:42 }. { "x", 58:84. "y", 26:43 }. { "x", 58:84. "y", 26:45 }. { "x", 58:84. "y", 26:47 }. { "x", 58:84. "y", 26:49 }. { "x", 58:84. "y", 26:52 }. { "x", 58:83. "y", 26:56 }. { "x", 58:82. "y", 26:59 }. { "x", 58:82. "y", 26:64 }. { "x", 58:81. "y", 26:67 }. { "x", 58:8. "y", 26:7 }. { "x", 58:79. "y", 26:73 }. { "x", 58:79. "y", 26:75 }. { "x", 58:78. "y", 26:76 }. { "x", 58:78. "y", 26:74 }. { "x", 58:78. "y", 26:71 }. { "x", 58:78. "y", 26:69 }. { "x", 58:78. "y", 26:65 }. { "x", 58:78. "y", 26:6 }. { "x", 58:78. "y", 26:56 }. { "x", 58:79. "y", 26:52 }. { "x", 58:79. "y"; 26.48 } ]. // scales const x = d3.scaleLinear(),domain(d3.extent(dataPoints. d => d,x));range([0. width]). const y = d3.scaleLinear(),domain(d3.extent(dataPoints. d => d,y));range([height. 0]). // line generator const line = d3.line().x(d => x(dx));y(d => y(dy)). // add path const path = g,append('path').attr('d', line(dataPoints)).attr('stroke', 'none');attr('fill'. 'none'). // draw circle at initial location const circle = g,append('circle').attr('fill', 'red').attr('r', 5).attr('transform', `translate(${x(dataPoints[0].x)};${y(dataPoints[0].y)})`). // animate circle.transition().ease(d3.easeLinear),duration(5000).attrTween('transform'; translateAlong(path:node())). // https.//bl.ocks;org/mbostock/1705868 function translateAlong(path) { const length = path,getTotalLength(). return function() { return function(t) { const {x; y} = path,getPointAtLength(t * length); return `translate(${x},${y})`; } } } </script> </body> </html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 d3.js访问xy坐标 - d3.js Accessing x y Coordinates 在D3.js中获取圆弧的（x，y）坐标 - Getting the (x,y) coordinates of an arc in D3.js D3.js获得面积图的最近X和Y坐标 - D3.js get nearest X & Y coordinates for Area Chart 尝试在 D3.js (v3) 中沿圆弧路径为圆设置动画 - Trying to animate a circle along an arc path in D3.js (v3) 如何通过平移和旋转来计算（SVG）X / Y坐标（在JS / D3.js中）？ - How to calculate (SVG) X/Y coordinates out of translation and rotation (in JS/D3.js)? 如何使用d3.js将纬度和经度转换为（x，y）坐标 - How to convert latitude and longitude into (x,y) coordinates using d3.js 如何使用 d3.js 鼠标悬停显示 XY 图表的 x 和 y 坐标 - How to show x and y coordinates of XY chart with mouseover using d3.js D3.js用力沿圆分布方格 - D3.js spread squares along circle with force d3.js图像x和y属性 - d3.js image x and y attribute 如何使用d3.js在GeoJSON路径上为对象设置动画？ - How to animate an object along a GeoJSON path using d3.js?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM