stackoom
  简体   繁体   中英

D3.js animate a circle along x, y coordinates

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

Question

I would like to animate a circle along x,y coordinates. I want the circle to move along the provided x,y coordinates. So far my code is just drawing multiple circles for each x,y point. The circles follow the x,y coordinates but all I want is one circle to move along the points. I have provided a sample of few datapoints. The dataset has thousands of x,y points.

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

   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 answers

solution1
 0  2021-12-21 02:28:24

Here's an example based on one from Mike Bostock . You can create a path and then use attrTween to move the circle along the path. 

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question d3.js Accessing x y Coordinates Getting the (x,y) coordinates of an arc in D3.js D3.js get nearest X & Y coordinates for Area Chart Trying to animate a circle along an arc path in D3.js (v3) How to calculate (SVG) X/Y coordinates out of translation and rotation (in JS/D3.js)? How to convert latitude and longitude into (x,y) coordinates using d3.js How to show x and y coordinates of XY chart with mouseover using d3.js D3.js spread squares along circle with force d3.js image x and y attribute How to animate an object along a GeoJSON path using d3.js?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM