如何使用范圍滑塊/滾動 arrays 來更新 d3.js 中的 x、y 和 r 值？ (d3.js)

Question

我正在嘗試 plot 氣泡圖，它還允許您使用 slider 范圍顯示數據隨時間的變化。這需要“滾動”數組並相應地更新氣泡的 x、y 和 r 值。 我能夠設置基本圖表的范圍 slider 和 plot，但我不知道如何使用 slider 更新這些值。到目前為止，我在網上找到的所有內容都只是使用 slider 的值作為數據的輸入。

我認為有意義的數據結構如下所示：

let data = [
{
name: 'Entry1', 
year: [2000, 2001, 2002, 2003, 2004, 2005],
radius: [0, 0, 20, 30, 40, 60], 
xVal: [0, 0, 40, 40, 50, 30], 
yVal: [0, 0, 20, 40, 10, 70]},
{
name: 'Entry2', 
year: [2000, 2001, 2002, 2003, 2004, 2005],
radius: [0, 0, 0, 0, 20, 15], 
xVal: [0, 0, 0, 0, 15, 30], 
yVal: [0, 0, 0, 0, 20, 50]},
{
name: 'Entry3', 
year: [2000, 2001, 2002, 2003, 2004, 2005],
radius: [10, 20, 30, 40, 30, 10], 
xVal: [5, 20, 20, 50, 40, 20], 
yVal: [10, 30, 20, 80, 40, 20]},
];

如果有人能在這里指出我正確的方向，那就太好了：）謝謝大家！

這是我現在的代碼（我刪除了 arrays 以使其工作） https://jsfiddle.net/qgesxf1k/11/

Answer 1

我自己解決了這個問題，但如果有人遇到類似問題，我想留下這個問題。

 //The Data let data = [ { name: 'Entry1',radius: [30, 35, 40, 45, 50], xVal: [.20, .25, .30, .35, .40], yVal: [.20, .25, .30, .35, .40]}, { name: 'Entry2',radius: [10, 15, 20, 25, 30], xVal: [.60, .65, .70, .75, .80], yVal: [.60, .65, .70, .75, .80]}, ]; //Plot SVG const width = 600; const height = 600; const margin = { top: 20, right: 20, bottom: 20, left: 20 }; const svg = d3.select('#content').append('svg').attr('viewBox', [0, 0, width, height]).attr('preserveAspectRatio', 'xMidYMid meet'); //Build Axis const xScale = d3.scaleLinear().domain([0, 1]).range([margin.left, width - margin.right]); const yScale = d3.scaleLinear().domain([1, 0]).range([margin.top, height - margin.bottom]); const xAxis = d3.axisBottom(xScale).ticks(1); const yAxis = d3.axisLeft(yScale).ticks(1); const xAxisGroup = svg.append('g').attr("transform", "translate(0," + (height - margin.top) + ")").call(xAxis); const yAxisGroup = svg.append('g').attr("transform", "translate("+ (margin.right) +",0)").call(yAxis); //Load the initial Data and set the index of the array to 0 const bubbles = svg.selectAll('circle').data(data).enter().append('circle').attr('cx', d => xScale(d.xVal[0])).attr('cy', d => yScale(d.yVal[0])).attr('r', d => d.radius[0]) //Update when slider input changes --> HTML oninput="updateData();" function updateData() { //get the slider value let i = document.getElementById('timeSlider').value; d3.select('svg').selectAll('circle') //call the data.data(data) //slide trough the index of the array and return the corresponding value.attr('cx', d => xScale(d.xVal[i])).attr('cy', d => yScale(d.yVal[i])).attr('r', d => d.radius[i]) }

 <script src="https://d3js.org/d3.v7.min.js"></script> <div id="content"></div> <input id="timeSlider" type="range" value="0" min="0" max="4" oninput="updateData();">