Question

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

在dom中显示但在svg中未连接的路径元素

0 个答案: