当触发选择菜单更改时,我试图从SVG中删除旧路径。
我可以删除新创建的路径,但是我无法删除初始绘制中的路径。
我理解这个问题可能听起来很模糊,所以请访问Plunker链接,了解我想要更清楚地实现的目标。
http://plnkr.co/edit/Xk1y6VTOVNQFmUC6YBOi?p=previewM
D3 CODE
// Add select menu
d3.select('#select').append('select')
.attr( 'id', 'select-menu' )
.on( 'change', updateGraph )
.selectAll( 'option' )
.data( dataNest )
.enter().append( 'option' )
.attr( 'value', function (d) {return d.key; } )
.text( function (d) { return d.key; } );
// Function to update the graph on select menu change.
// Need to get it working still to re draw line and remove others
function updateGraph () {
// Select menu value
var value = this.value;
// Filtered dataset for selected member from select menu
var selectedData = data.filter( function(d) { return d.sensor == value; });
// Change the domain of the y axis (the values up the left)
y.domain( [ 0, d3.max(selectedData.map( function(d) { return d.footfall; } )) ] );
// Transition the change of y axis domain values
svg.select( '.y.axis' )
.transition().duration(1000)
.call( yAxis );
// Pass the value of the select input as the data for the dots
var dot = svg.selectAll( '.dot' ).data( selectedData );
// create new circles
dot.enter().append( "circle" )
.attr("class", "dot")
.attr("cx", function (d) { return x(d.date); })
.attr("cy", function (d) { return y(d.footfall); })
.attr("r", 9)
.style("fill", function(d) { return color(d.sensor); });
// transition *update* set
dot.transition().duration(1000)
.attr("cx", function (d) { return x(d.date); })
.attr("cy", function (d) { return y(d.footfall); });
// remove dots
dot.exit().remove();
var lines = svg.selectAll( 'path' ).data( selectedData );
// Nest the entries by sensor
var dataNest = d3.nest()
.key(function (d) { return d.sensor; })
.entries(selectedData);
dataNest.forEach(function (d, i) {
// Add Path to SVG
svg.append("path")
.attr("class", "newLine")
.attr("id", 'line' + d.key.replace(/\s+/g, '') )
.attr("d", line(d.values) )
.style("stroke", function () { return d.color = color(d.key); });
});
// remove dots
lines.exit().remove();
}