更改D3时删除路径

时间:2014-12-07 16:14:51

标签: javascript svg d3.js

当触发选择菜单更改时,我试图从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();

            }

0 个答案:

没有答案