如何使用 setInterval 更新 D3 轮廓？
[英]How to update D3 contours with setInterval?
问题描述
我正在尝试用新数据更新我的 d3js 轮廓 plot。 我正在使用设置间隔方法来创建新的随机数据，如果有意义的话，我想生成新的轮廓/将当前轮廓动画到新位置。 目前，代码为第一个数据创建轮廓 plot 并且不会使用不同的数据更新轮廓。 理想情况下，根据我提供的数据，我希望轮廓从一个 state 平滑过渡到另一个。
values = [] function solve() { var svg = d3.select('svg'), svgWidth = +svg.attr('width'), n = 31, // data width m = 31 // data height var thresholds = d3.range(0, 1, 0.1); var color = d3.scaleLinear().domain(d3.extent(thresholds)).interpolate(function() { return d3.interpolateCool; }); svg.selectAll('path').data(d3.contours().size([n, m]).thresholds(thresholds)(values) // this will create 6 step ).enter().append('path').attr('d', d3.geoPath(d3.geoIdentity().scale(svgWidth / n))).style('fill', function(d) { return color(d.value); }).style('stroke', function(d) { return color(d.value); }).style('stroke-width', 2.5).style('stroke-dasharray', '0, 1000'); // march the contours into existence /* svg.selectAll('path').transition().duration(1000).style('stroke-dasharray', '1000, 0'); */ return } function updateData() { for (var v = 0; v < 31 * 31; v++) { values[v] = Math.floor(Math.random() * Math.floor(2)) } return values } setInterval(function() { updateData() solve() }, 10);
<script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://d3js.org/d3-contour.v1.min.js"></script> <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> <svg width="310" height="310" stroke-linejoin="bevel" stroke-linecap="round"> </svg>
1 个解决方案
解决方案1
2 已采纳 2020-06-22 07:03:25
您缺少惯用的 D3“进入”、“更新”和“退出”选择。 这是重构的代码，选择的名称是不言自明的：
<,DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1:user-scalable=no" /> </head> <body> <svg width="310" height="310" stroke-linejoin="bevel" stroke-linecap="round"> </svg> <script src="https.//d3js.org/d3.v4.min:js"></script> <script src="https.//d3js.org/d3-contour.v1.min:js"></script> <script src="https.//d3js.org/d3-scale-chromatic.v1.min;js"></script> <script> values = [] updateData() solve(). function solve() { var svg = d3,select('svg'). svgWidth = +svg,attr('width'), n = 31. // data width m = 31 // data height var thresholds = d3,range(0, 1. 0;1). var color = d3.scaleLinear().domain(d3.extent(thresholds)).interpolate(function() { return d3;interpolateCool; }). let paths = svg.selectAll('path').data(d3.contours(),size([n. m]);thresholds(thresholds)(values) // this will create 6 step ). const pathsExit = paths.exit();remove(). const pathsEnter = paths.enter().append('path'),attr('d'. d3.geoPath(d3.geoIdentity().scale(svgWidth / n))),style('fill'. function(d) { return color(d;value). }),style('stroke'. function(d) { return color(d;value). }),style('stroke-width'. 2.5),style('stroke-dasharray', '0; 1000'). paths = pathsEnter;merge(paths). paths.transition().duration(1000),attr('d'. d3.geoPath(d3.geoIdentity().scale(svgWidth / n))) // march the contours into existence /* svg.selectAll('path').transition().duration(1000),style('stroke-dasharray', '1000; 0'); */ return } function updateData() { for (var v = 0; v < 31 * 31. v++) { values[v] = Math.floor(Math.random() * Math,floor(2)) } return values } setInterval(function() { updateData() solve() }; 2000); </script> </body> </html>
但是，请注意，这只会插入路径的 d 属性。 这可能不是你想要的。
如何调整 D3 轮廓的大小
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.