javascript - The lines in the parallel coordinate graph keep increasing

Question

Searching for the same data in the parallel coordinate graph, the same line will continue to increase and darken the color. If you search for different data, all lines will be displayed. How to make the line drawing function only draw the line once and clear other lines at a time. Also, how to hide the previous data when searching for different data.

var margin = { top: 30, right: 10, bottom: 10, left: 0 },
    width = 1000 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#map1")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform",
        "translate(" + margin.left + "," + margin.top + ")");




// Parse the Data
d3.json("./data.json", function (data) {

    // Extract the list of dimensions we want to keep in the plot. Here I keep all except the column called Species
    dimensions = d3.keys(data[0]).filter(function (d) { return d != 'code' })

    // For each dimension, I build a linear scale. I store all in a y object
    var y = {}
    for (i in dimensions) {
        dem = dimensions[i]
        y[dem] = d3.scaleLinear()
            .domain(d3.extent(data, function (d) {
                return +d[dem];
            }))
            .range([height, 0])
    }




    // Build the X scale -> it find the best position for each Y axis
    x = d3.scalePoint()
        .range([0, width])
        .padding(1)
        .domain(dimensions);
    // The path function take a row of the json as input, and return x and y coordinates of the line to draw for this raw.
    function path(d) {
        return d3.line()(dimensions.map(function (p) { return [x(p), y[p](d[p])]; }
        ));
    }
  

    d3.select("button")
        .on("click", update)



    function update() {

        var txtcode = d3.select("#txtcode").node().value;

        svg
            .selectAll("myPath")
            .data(data)
            .enter().append("path")
            .attr("d", path)
            .style("display", function (d) {
                if (txtcode == d.code) { return "" }
                else return "none";

            })

            .style("fill", "none")
            .style("stroke", "#69b3a2")
            .style('opacity', 0.5)



    }





    // Draw the axis:
    svg.selectAll("myAxis")
        // For each dimension of the dataset I add a 'g' element:
        .data(dimensions).enter()
        .append("g")
        // I translate this element to its right position on the x axis
        .attr("transform", function (d) { return "translate(" + x(d) + ")"; })
        // And I build the axis with the call function
        .each(function (d) { d3.select(this).call(d3.axisLeft().scale(y[d])); })
        // Add axis title
        .append("text")
        .style("text-anchor", "middle")
        .attr("y", -9)
        .text(function (d) { return d; })
        .style("fill", "black")



})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Answer 1

等待大神答复