javascript - 移动折线图上的圆圈-6ren

javascript - 移动折线图上的圆圈

转载作者：行者123 更新时间：2023-12-04 10:00:10

想在我的实时折线图上绘制圆圈。图表每次迭代都会生成随机 y 值并将其绘制在图表上，从而移动域。这是我的代码 -

const svg = d3.select('svg');
const MARGIN = {TOP: 50, BOTTOM: 50, LEFT: 50, RIGHT: 50};
const WIDTH = svg.attr('width') - MARGIN.LEFT - MARGIN.RIGHT;
const HEIGHT = svg.attr('height') - MARGIN.TOP - MARGIN.BOTTOM;

const limit = 60;
const duration = 500;
let dataList = [];

let g = svg.append('g').attr('transform', `translate( ${MARGIN.LEFT}, ${MARGIN.TOP} )`);

g.append('defs').append('clipPath')
				    .attr('id', 'clip2')
				.append('rect')
					.attr('x', 0)
					.attr('y', 0)
					.attr('width', WIDTH)
					.attr('height', HEIGHT);

// ParseTime

const timeScale = d3.scaleTime()
					.range([0, WIDTH]);

const valueScale = d3.scaleLinear()
					.domain([0, 10])
					.range([HEIGHT, 0]);

const line = d3.line()
				.curve(d3.curveBasis)
				.x((d) => timeScale(d.time))
				.y((d) => valueScale(d.value));

const xAxis = 	d3.axisBottom(timeScale);

const axisCall = g.append('g')
                  .attr('transform', `translate(0, ${HEIGHT})`);

axisCall.call(xAxis);

g.append('g')
	.attr('class', 'axis axis--y')
	.call(d3.axisLeft(valueScale))

let pathsG = g.append('g').attr('id', 'paths').attr('class', 'paths').attr('clip-path', 'url(#clip2)');

function updateChart() {
	let now = Date.now();
  dataList.push({
  	time: now,
    value: Math.floor(Math.random() * 10)
  });
  
  // Shift domain
  timeScale.domain([now - ((limit - 2) * duration), now - duration]);
  
  axisCall.transition().duration(duration).ease(d3.easeLinear, 2).call(xAxis);
  
  let minerG = pathsG.selectAll('.minerLine').data([dataList]);
  let minerGEnter = minerG.enter()
  							.append('g')
  							.attr('class', 'minerLine')
  							.merge(minerG);
  
  let minerSVG = minerGEnter.selectAll('path').data(function(d) {
  	return [d];
  });
  
  let minerSVGenter = minerSVG.enter()
  					          .append('path').attr('class', 'line')
  							  .style('stroke', '#D073BA')
  							  .style('fill', 'none')
  						      .merge(minerSVG)
  							  .transition()
  							  .duration(duration)
  							  .ease(d3.easeLinear, 2)
  							  .attr('d', line(dataList))
  							  .attr('transform', null);
                  
   let circles = minerGEnter.selectAll('circle')/*.data(function(d) {
            return [d];
        });*/
  circles.data(dataList)
          .enter()
          .append('circle')
          .merge(circles)
          .transition()
          .duration(duration)
          .ease(d3.easeLinear, 2)
          .attr('r', 5)
          .attr('cx', (d, i) => timeScale(d.time))
          .attr('cy', d => valueScale(d.value));

  circles.exit().remove();
  
  }

setInterval(function(){ 
   //console.log('hello');
  updateChart();
}, 500);

<!DOCTYPE html>
<html>
  <head></head>
    <title>Real-time Line Chart D3</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://d3js.org/d3.v5.min.js"></script>
  <body>
    <svg width="960" height="500">
    </svg>
    <script src="bundle.js"></script>
  </body>
</html>

如您所见，图表正在运行，但圆圈不起作用。他们是两个问题。图表显示圆圈进入图表的动画，圆圈似乎有错误的 y 值。我很确定我添加圆圈的方式不正确。尝试从在线代码中获取示例，但没有任何效果。

任何想法如何解决这两个问题？

最佳答案

圆圈的位置没有错，它们是正确的。它们可能看起来是错误的，因为您正在对路径使用内插器 ( d3.curveBasis )，该路径会对其进行修改:删除内插器可以清楚地表明这一点，如下面的演示所示。此外，关于转换，解决方案可能是在输入选择中设置圆圈的位置，并且只转换 x在更新选择中的位置。

这是您的代码，仅进行了这 2 处更改:

const svg = d3.select('svg');
const MARGIN = {
  TOP: 50,
  BOTTOM: 50,
  LEFT: 50,
  RIGHT: 50
};
const WIDTH = svg.attr('width') - MARGIN.LEFT - MARGIN.RIGHT;
const HEIGHT = svg.attr('height') - MARGIN.TOP - MARGIN.BOTTOM;

const limit = 60;
const duration = 500;
let dataList = [];

let g = svg.append('g').attr('transform', `translate( ${MARGIN.LEFT}, ${MARGIN.TOP} )`);

g.append('defs').append('clipPath')
  .attr('id', 'clip2')
  .append('rect')
  .attr('x', 0)
  .attr('y', 0)
  .attr('width', WIDTH)
  .attr('height', HEIGHT);

// ParseTime

const timeScale = d3.scaleTime()
  .range([0, WIDTH]);

const valueScale = d3.scaleLinear()
  .domain([0, 10])
  .range([HEIGHT, 0]);

const line = d3.line()
  .x((d) => timeScale(d.time))
  .y((d) => valueScale(d.value));

const xAxis = d3.axisBottom(timeScale);

const axisCall = g.append('g')
  .attr('transform', `translate(0, ${HEIGHT})`);

axisCall.call(xAxis);

g.append('g')
  .attr('class', 'axis axis--y')
  .call(d3.axisLeft(valueScale))

let pathsG = g.append('g').attr('id', 'paths').attr('class', 'paths').attr('clip-path', 'url(#clip2)');

function updateChart() {
  let now = Date.now();
  dataList.push({
    time: now,
    value: Math.floor(Math.random() * 10)
  });

  // Shift domain
  timeScale.domain([now - ((limit - 2) * duration), now - duration]);

  axisCall.transition().duration(duration).ease(d3.easeLinear, 2).call(xAxis);

  let minerG = pathsG.selectAll('.minerLine').data([dataList]);
  let minerGEnter = minerG.enter()
    .append('g')
    .attr('class', 'minerLine')
    .merge(minerG);

  let minerSVG = minerGEnter.selectAll('path').data(function(d) {
    return [d];
  });

  let minerSVGenter = minerSVG.enter()
    .append('path').attr('class', 'line')
    .style('stroke', '#D073BA')
    .style('fill', 'none')
    .merge(minerSVG)
    .transition()
    .duration(duration)
    .ease(d3.easeLinear, 2)
    .attr('d', line(dataList))
    .attr('transform', null);

  let circles = minerGEnter.selectAll('circle').data(function(d) {
    return d;
  });

  circles.exit().remove();

  circles = circles.enter()
    .append('circle')
    .attr('r', 5)
    .attr('cx', (d, i) => timeScale(d.time))
    .attr('cy', d => valueScale(d.value))
    .merge(circles);

  circles.transition()
    .duration(duration)
    .ease(d3.easeLinear, 2)
    .attr('cx', (d, i) => timeScale(d.time));

}

setInterval(function() {
  //console.log('hello');
  updateChart();
}, 500);

<!DOCTYPE html>
<html>

<head></head>
<title>Real-time Line Chart D3</title>
<link rel="stylesheet" href="styles.css">
<script src="https://d3js.org/d3.v5.min.js"></script>

<body>
  <svg width="960" height="500">
    </svg>
  <script src="bundle.js"></script>
</body>

</html>

关于javascript - 移动折线图上的圆圈，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61851969/

文章推荐： haskell - 在多个属性上编写有序比较的优雅方式

文章推荐： r - 如果我的版本不可用，如何在 R 中安装 libxml2 包？

文章推荐： java - 如何解决viewpager中的相同内容复制

java - 在路径上移动对象(圆圈)
我需要移动一个对象，在我的例子中是给定路径上的一个字符串。实际上路径可以是半圆。如附图所示，字符串应该出现在另一个物体的后面，沿着路径移动并消失在第二个物体(两个图像)后面。我不知道如何开始...希望
内部带有动态文本的 CSS 圆圈
我需要构建一个圆形(在 css 中)，它有 2 行文本，可以根据选择的翻译改变长度并始终居中。到目前为止我有这个: h3 { background-color: #fcd141; borde
带文字换行的 CSS3 圆圈
是否可以在 CSS3 中使用 -webkit-border-radius 绘制一个圆，同时将宽度和高度限制为特定变量(例如 height:100px 和 width:100px) 所以当在圆圈内添加文
带有文字覆盖在图像上的 css 圆圈
我正在尝试在方形图像上叠加一个圆圈。文本需要在圆圈中水平和垂直居中。我几乎用正方形 div 做对了，但是一旦我将图像放入组合中，圆圈就会移动到图像下方。我的代码。 .Container { w
html - 圆圈/圆盘中的中心对齐图标
使用 CSS，我有一个将图标放置在圆圈/圆盘中的显示。这是我的例子: 但我很难将图标放在圆圈/圆盘的中心。我已经搜索过 SO(找到 this post 但更改行高只会扩展圆盘/圆圈)和 Googl
带有内联文本的 CSS 圆圈
我正在尝试在一行中制作几个带有文本的 css 圆圈。当我使用 circle 类来 img 时，圆圈是内联的，但我无法添加任何文本。当我使用 circle class 到 div 时，我可以添加文本，但
Android如何在按下按钮时使ProgressBar(圆圈)覆盖全屏？
我尝试在单击“提交”按钮时显示 ProgessBar。它会在数据加载完成时隐藏。但是，progressBar 没有覆盖整个屏幕。相反，它被按钮覆盖。请引用屏幕截图，它应该更容易理解我的意思。我要实现
具有两个不同颜色或至少看起来像的边框的 CSS 圆圈
这个问题在这里已经有了答案: Circle with two borders (4 个答案) 关闭 7 年前。我有一个只有一个边框的圆圈，但我想知道是否有办法实现一个有两个不同颜色边框的圆圈。我有
带有镶嵌边框的 CSS 圆圈
我正尝试按照以下示例在 CSS 中创建一个带有镶嵌边框的圆圈: 我有以下 HTML 和 CSS，但它没有产生我需要的效果: .inlay-circle { width: 15rem; heig
带边框的 CSS 圆圈
我找到的每个指南都有相同的线条和填充颜色。我想要的只是一个带有红线和白色填充的圆圈。我试过: .circle { border: red; background-color: #FF
html - 添加颜色和图像以填充 SVG 圆圈
我正在寻找一种用纯色和图像填充 SVG 圆圈的方法。我现在尝试的是使用这段代码: 它用我的背景图片绘制
javascript - 如何向每个用户显示自定义数量的 SVG 圆圈？
我目前正在组建一个将托管用户的网站。每个用户都会有一个个人资料页面，该页面将显示 SVG 圆数组，每个用户在数据库的用户表中自己的行中也有一个相应的 SVG_number。例如，如果 User1 在
javascript - 无法成组创建 svg 圆圈
我正在尝试在 SVG 中创建三组圆圈。我给他们打电话circleA circleB和circleC我打算给它们涂上不同的颜色。 var circleA = [ [50,48],[106,35]
javascript - SVG 圆圈、文本或线条上的可点击链接
使用 snapsvg.io，我想知道是否可以添加可点击的链接，例如 My Link标记到 SVG 文本、圆圈或线条。我这里的一个例子是文本: var s = Snap("#svg"); var te
java - 随机游走者(圆圈)比其他轴更频繁地向上移动
所以这是我的一个小项目，只是为了好玩。我尝试使用 libgdx 在 Java 中重新创建随机 Walker。现在我认为我的代码非常成功，因为它工作正常(也许)。但是有一个问题，圆比其他轴更倾向于向
css - 创建与垂直线和水平线相连的 CSS 圆圈
我想在 CSS 中创建一个在右边和底部有线条的圆。类似下图。我找到了一个 css code水平连接圆圈。我不知道如何垂直添加线条或类似于我附加的图像？
javascript - 如何在标签内附加 SVG 圆圈
以下圆形标签位于标签内: 现在我必须将生成的圆圈附加到标签内，例如更新: function createCircle(a) { var circle = document.
javascript - 在切片中填充一个 javascript 圆圈
我希望圆圈类似于饼图，具有相同的不同颜色切片。出于某种原因，我画了一个圆，在带有颜色的一侧有弧形，中间有一个白色八边形。 for(var i=0;i<8;i++){ ctx.beginPath
javascript - Highcharts 中样条图中的标记/圆圈
我有一个场景，我必须在样条图中创建标记/圆圈。我使用 highcharts 创建了样条图表，图表的代码如下。我的输出应该如下所示。我已经在图像中标记了预期的圆圈: $(function ()
Python Networkx 检测循环/圆圈
给定以下示例: 是否有可能检测到网络中的环路 (I1, I2,I3, C6, C7, I5)？我试过:simple_cycles → 它适用于 3 个节点，但不能超过 3 个。我需要检测包含所有节

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 移动折线图上的圆圈