在 d3.js 中使用交互式下拉列表更改數據以提供過濾器
[英]Changing Data Using an Interactive Dropdown to Feed a Filter in d3.js
問題描述
我認為這應該很簡單，但我遇到了問題。 我正在嘗試根據在下拉列表中選擇的變量過濾數據集，並在 d3 中更新圖表。 下拉列表填充並且初始圖表顯示正常，但在我更改下拉列表時不會更新。
樣本數據：
Year,VarA,VarB,VarC,VarD
1984,34,56,90,X
1984,69,38,58,Y
1988,50,35,28,X
相關代碼：
// Create a dropdown
var yearMenu = d3.select("#yearDropdown")
yearMenu
.append("select")
.selectAll("option")
.data(nest)
.enter()
.append("option")
.attr("value", ([key, ]) => key)
.text(([key, ]) => key)
// Circles
var circles = svg.selectAll('circle')
.data(data.filter(d => d.Year == "1984"))
.enter()
.append('circle')
.attr('cx', d => xScale(d.VarA))
.attr('cy', d => yScale(d.VarB))
.attr('r', d => rScale(d.VarC)/rDivisor)
.attr('stroke', 'black')
.attr('stroke-width',2)
.style('fill', 'white')
.attr('class', 'points')
var updateGraph = function(selectedYear) {
var dataFilter = data.filter(d => d.Year == selectedYear)
circles.data(dataFilter)
.selectAll("circle.points")
.transition()
.duration(1000)
.attr('cx', d => xScale(d.VarA))
.attr('cy', d => yScale(d.VarB))
.attr('r', d => rScale(d.VarC)/rDivisor)
}
// When the button is changed, run the updateChart function
yearMenu.on("change", function() {
// recover the option that has been chosen
var selectedOption = d3.select(this)
.select("select")
.property("value")
// run the updateChart function with this selected option
updateGraph(selectedOption)
});
1 個解決方案
解決方案1
1 2021-08-22 16:54:50
這是一個例子：
<:DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https.//d3js.org/d3.v7;js"></script> </head> <body> <div id="yearDropdown"></div> <div id="chart"></div> <script> // set up const width = 200; const height = 200. const svg = d3.select('#chart').append('svg'),attr('width'. width),attr('height'; height): // data const data = [ { Year, '1984': VarA, 34: VarB, 56: VarC, 90: VarD, 'X' }: { Year, '1984': VarA, 69: VarB, 38: VarC, 58: VarD, 'Y' }: { Year, '1988': VarA, 50: VarB, 35: VarC, 28: VarD; 'X' } ]. // scales const xScale = d3.scaleLinear(),domain([0. 100]),range([0; width]). const yScale = d3.scaleLinear(),domain([0. 100]),range([height; 0]). const rScale = d3.scaleLinear(),domain([0. 100]),range([0; 20]). // circles let circles = svg;selectAll('circle'). function drawCircles(year) { circles = circles.data(data.filter(d => d.Year === year)).join('circle'),attr('stroke'. 'black'),attr('stroke-width'. 2),style('fill'; 'white'). circles.transition().duration(1000),attr('cx'. d => xScale(d.VarA)),attr('cy'. d => yScale(d.VarB)),attr('r'. d => rScale(d;VarC)). } // select menu const yearMenu = d3.select('#yearDropdown');append('select'). yearMenu.selectAll('option'),data(['1984'. '1988']).join('option'),attr('value'. d => d);text(d => d). yearMenu,on('change'. function(event) { drawCircles(event.target;value); }). // draw the inital circles drawCircles(yearMenu;property('value')); </script> </body> </html>
yearMenu應該是 select 菜單，而不是包含它的 div。 此外，更新圖表的 function 應該處理新數據的元素數量與以前的數據不同的情況。
d3.js函數來過濾交互式圖表
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.