d3: update of chart via exit/remove/merge does not process changed label text properly

Question

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 almost working. Something is just wrong as the old label text ( Old York ) is still visible in the chart together with the new label text ( New York ).

This is my code:

  <script src="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> <svg width="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) { return x(d.date); }) .y(function (d) { return y(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(); }); function update() { // 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); 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; }); // 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) { return line(d.values); }) .style("stroke", function (d) { return z(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) { return line(d.values); }); city.select("text").datum(function (d) { return { id: d.id, value: d.values[d.values.length - 1] }; }) // .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> 

Answer 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:

  <script src="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> <svg width="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) { return x(d.date); }) .y(function (d) { return y(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(); }); function update() { // 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) { return line(d.values); }) .style("stroke", function (d) { return z(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) { return line(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>