path元素显示为dom中的单个点,而不是SVG中的一串元素。代码看起来像这样
//------ BEGIN NEW CODE HERE ------
let univMenu = d3.select("#univDropdown");
univMenu
.append("select")
.selectAll("option")
.data(nest)
.enter()
.append("option")
.attr("value", function(d){return d.key;})
.text(function(d){return d.key;})
// Function to create the initial graph
let initialGraph = function(univ){
let selectUniv = nest.filter(function(d){return d.key == univ;})
let selectUnivGroups = svg.selectAll(".univGroups")
.data(selectUniv, function(d){return d ? d.key : this.key;})
.enter()
.append("g")
.attr("class", "univGroups")
let initialPath = selectUnivGroups.selectAll(".line")
.data(function(d) { return d.values; })
.enter()
.append("path")
initialPath
.attr("d", function(d){return valueLine(d.values)})
.attr("class", "line")}
// Create initial graph
initialGraph("USHE Average")
// Update the data
let updateGraph = function(univ){
// Filter the data to include only fruit of interest
let selectUniv = nest.filter(function(d){return d.key == univ;})
// Select all of the grouped elements and update the data
let selectUnivGroups = svg.selectAll(".univGroups")
.data(selectUniv)
// Select all the lines and transition to new positions
selectUnivGroups.selectAll("path.line")
.data(function(d){return (d.values);})
.transition()
.duration(1000)
.attr("d", function(d){return valueLine(d.values)})}
// Run update function when dropdown selection changes
univMenu.on('change', function(){
let selectedUniv = d3.select(this)
.select("select")
.property("value")
updateGraph(selectedUniv)
});
我的想法是我将有一个选择器可以在不同大学之间切换,以通过“ univMenu”显示其费用。 我们非常感谢您提供帮助以单独显示该路径。我在CSS中有样式。
编辑:valueLine变量定义为:
var valueLine = d3.line()
.x(function(d) { return x(d.Year); })
.y(function(d) { return y(+d.Currentdollars); });
CSV的示例是
University,USHE average,Constant dollars,Currentdollars,Year,% change from
previous year
University of Utah,NA,"$49,711 ",56990.00,2008,NA