D3: Update Of Chart Via Exit/remove/merge Does Not Process Changed Label Text Properly

For d3.js (d3.v4.js) based on https://bl.ocks.org/mbostock/3884955 (Multi-Series Line Chart), I need to update the label text, if new data has to be processed. The example is almos

Solution 1:

You are appending a new <text> in the update select. Since you are updating the text in the combined selection, you do not even need to update the text value. You can just remove this part:

   city.append("text")
                .datum(function(d) {
                    return {
                        id: d.id,
                        value: d.values[d.values.length - 1]
                    };
                })
                .attr("transform", function(d) {
                    return"translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")";
                })
                .attr("x", 3)
                .attr("dy", "0.35em")
                .style("font", "10px sans-serif")
                .text(function(d) {
                    return d.id;
                });

You also need to update the text:

 city.select("text").datum(function(d) {
        return {
            id: d.id,
            value: d.values[d.values.length - 1]
        };
    })
    .text(function(d) {
        return d.id;
    })

here is the updated code:

<scriptsrc="https://d3js.org/d3.v4.min.js"></script><style>.axis--x path {
            display: none;
        }
            
        .line {
            fill: none;
            stroke: steelblue;
            stroke-width: 1.5px;
        }
            
    </style><button>Click me</button><svgwidth="960"height="500"></svg><!--<script src="d3.v4.js"></script>--><script>var svg = d3.select("svg"),
            margin = {
                top: 20,
                right: 80,
                bottom: 30,
                left: 50
            },
            width = svg.attr("width") - margin.left - margin.right,
            height = svg.attr("height") - margin.top - margin.bottom,
            g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
            
        var parseTime = d3.timeParse("%Y%m%d");
            
        var x = d3.scaleTime().range([0, width]),
            y = d3.scaleLinear().range([height, 0]),
            z = d3.scaleOrdinal(d3.schemeCategory10);
            
        var line = d3.line()
            .curve(d3.curveBasis)
            .x(function (d) {
                returnx(d.date);
            })
            .y(function (d) {
                returny(d.temperature);
            });
            
        var data = [{
            "date": "1136156400000",
            "Old York": 63.4,
            "San Francisco": 62.7,
            "Austin": 72.2
        }, {
            "date": "1167692400000",
            "Old York": 58.0,
            "San Francisco": 59.9,
            "Austin": 67.7
        }, {
            "date": "1199228400000",
            "Old York": 53.3,
            "San Francisco": 59.1,
            "Austin": 69.4
        }, {
            "date": "1230850800000",
            "Old York": 55.7,
            "San Francisco": 58.8,
            "Austin": 68.0
        }, {
            "date": "1262386800000",
            "Old York": 62.3,
            "San Francisco": 55.1,
            "Austin": 71.9
        }];
            
        var data2 = [{
            "date": "1136156400000",
            "New York": 263.4,
            "San Francisco": 262.7,
            "Austin": 372.2
        }, {
            "date": "1167692400000",
            "New York": 458.0,
            "San Francisco": 259.9,
            "Austin": -367.7
        }, {
            "date": "1199228400000",
            "New York": 153.3,
            "San Francisco": 259.1,
            "Austin": 369.4
        }, {
            "date": "1230850800000",
            "New York": 155.7,
            "San Francisco": 258.8,
            "Austin": 368.0
        }, {
            "date": "1262386800000",
            "New York": 162.3,
            "San Francisco": 255.1,
            "Austin": 371.9
        }];
    
    
        // d3.tsv("data.tsv", type, function (error, data) {//     if (error) throw error;
    
        data.columns = ["date", "Old York", "San Francisco", "Austin"];
    
        var cities = data.columns.slice(1).map(function (id) {
            return {
                id: id,
                values: data.map(function (d) {
                    return {
                        date: d.date,
                        temperature: d[id]
                    };
                })
            };
        });
    
        x.domain(d3.extent(data, function (d) {
            return d.date;
        }));
    
        y.domain([
            d3.min(cities, function (c) {
                return d3.min(c.values, function (d) {
                    return d.temperature;
                });
            }),
            d3.max(cities, function (c) {
                return d3.max(c.values, function (d) {
                    return d.temperature;
                });
            })
        ]);
        g.append("g")
            .attr("class", "axis axis--x")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x));
        g.append("g")
            .attr("class", "axis axis--y")
            .call(d3.axisLeft(y))
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", "0.71em")
            .attr("fill", "#000")
            .text("Temperature, ºF");
    
        update();
        d3.select("button").on("click", function () {
            // cities.splice(0, 1);
            data = data2;
            data.columns = ["date", "New York", "San Francisco", "Austin"];
            //            console.log(JSON.stringify(cities));update();
        });
    
        functionupdate() {
    //        data.columns = ["date", "New York", "San Francisco", "Austin"];
            cities = data.columns.slice(1).map(function (id) {
                return {
                    id: id,
                    values: data.map(function (d) {
                        return {
                            date: d.date,
                            temperature: d[id]
                        };
                    })
                };
            });
    
    
            x.domain(d3.extent(data, function (d) {
                return d.date;
            }));
            y.domain([
                d3.min(cities, function (c) {
                    return d3.min(c.values, function (d) {
                        return d.temperature;
                    });
                }),
                d3.max(cities, function (c) {
                    return d3.max(c.values, function (d) {
                        return d.temperature;
                    });
                })
            ]);
            z.domain(cities.map(function (c) {
                return c.id;
            }));
    
            var city = g.selectAll(".city")
                .data(cities);        
    
            // var text = g.selectAll(".text")//     .data(texts);
    
            city.exit().remove();
    
            var cityEnter = city.enter().append("g")
                .attr("class", "city");
    
            cityEnter.append("path")
                .attr("class", "line")
                .attr("d", function (d) {
                    returnline(d.values);
                })
                .style("stroke", function (d) {
                    returnz(d.id);
                });
    
    
            city = cityEnter.merge(city);
    
            cityEnter.append("text")
            //        city.append("text")
                .datum(function (d) {
                    return {
                        id: d.id,
                        value: d.values[d.values.length - 1]
                    };
                })
                .attr("transform", function (d) {
                    return"translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")";
                })
                .attr("x", 3)
                .attr("dy", "0.35em")
                .style("font", "10px sans-serif")
                .text(function (d) {
                    return d.id;
                });
    
    
            city.select("path")
            //            .transition().duration(1000)
                .attr("d", function (d) {
                    returnline(d.values);
                });
    
            city.select("text").datum(function (d) {
                return {
                    id: d.id,
                    value: d.values[d.values.length - 1]
                };
            })
            .text(function (d) {
                return d.id;
            })
            //            .transition().duration(1000)
                .attr("transform", function (d) {
                    return"translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")";
                });
    
            svg.select(".axis--y")
            //            .transition().duration(1000)
                .call(d3.axisLeft(y));
        }
    
    </script>