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