D3: how to use the update pattern for on-click-text?

Question

I want to update some shown text on a click-event. I read about the update pattern and I kinda understand it. But I am not sure if I can use it because I didn't find a way to change it accordingly.

This is how my graph looks right now: If you click on an arc I want to display details on the right side (just like the legend on the left). Issue is that if I click on a second arc it starts to put it below the previous one.

I achieved this by using this code:

    //tooltipdetails
    var tooltipDetails = svg.append("g")
                            .attr("transform", "translate(450,-500)") 
                            .attr('class', 'details')


    var i = 0;

This is in the d3.json(... function. In the on click function I have this code:

    for (var key in d.data) {
            //console.log(key + ":" + d.data[key])

            i = i + 1;
            var tooltipRow = tooltipDetails.append("g")
                .attr("transform", "translate(0, " + (i * 30) + ")");

            tooltipRow.append("text")
                .attr("id", "text")
                .attr("x", -20)
                .attr("y", 15)
                .attr("text-anchor", "start")
                .style("font-size", "15px")
                .text("")
                ;

            tooltipRow.select("text").text(function(){
                return key + ":" + d.data[key]
                })
                }

This is def not in the update-pattern, as I do not even have a .data . I read that it is not the smartest thing to always append new things. As I am very new to D3, I don't know how to proceed.

I tried writing an update function like this outside of the d3.json function and then calling it in the onclick function:

    //tooltipdetails
    var tooltipDetails = svg.append("g")
                            .attr("transform", "translate(450,-500)") 
                            .attr('class', 'arcdetails')

    var TooltipUpdateFunction = function update(){
        console.log("calling update")
        var u = d3.select('arcdetails')
                    .selectAll('*')
                    .data(function(d){
                        for (var key in d.data) {
                            //console.log(key + ":" + d.data[key])

                            i = i + 1;
                            var tooltipRow = tooltipDetails.append("g")
                                .attr("transform", "translate(0, " + (i * 30) + ")")
                                -attr('class', "detailsRow");

                            tooltipRow.append("text")
                                .attr("id", "text")
                                .attr("x", -20)
                                .attr("y", 15)
                                .attr("text-anchor", "start")
                                .style("font-size", "15px")
                                .text("")
                                ;

                            tooltipRow.select("text").text(function(){
                                return key + ":" + d.data[key]
                                })
                        }
                    });

        u.enter()
            .append('detailsRow')
            .merge(u)
            ;

        u.exit().remove();
    }

and

    TooltipUpdateFunction();

in the onclick function. But (surprise) it didn't work. I didn't really know what I should call with select all .

Could anyone explain to me how it would be possible to change it to a join exit update pattern, or is there even another way?

My code is pretty big (and maybe messy ;) but if you need or want to check out the rest: here is my git repo . (I used firefox. Another browser might screw my dataviz up - yay)

Answer 1

With help I found a solution that does the trick without the update pattern.

//tooltipdetails
    d3.select("#details").selectAll("#text").remove();
    var i = 0;
    for (var key in d.data) {
        //console.log(key + ":" + d.data[key])

        i = i + 1;
        var tooltipRow = tooltipDetails.append("g")
            .attr("transform", "translate(0, " + (i * 30) + ")");

        tooltipRow.append("text")
            .attr("id", "text")
            .attr("x", -20)
            .attr("y", 15)
            .attr("text-anchor", "start")
            .style("font-size", "15px")
            .text("")
            ;

        tooltipRow.select("text").text(function(){
            return key + ":" + d.data[key]
            })
            }

inside the on click-function and then outside the json-data-function:

//tooltipdetails
var tooltipDetails = svg.append("g")
                        .attr("transform", "translate(450,-500)") 
                        .attr('id', 'details')

I guess there may be a nicer solution with the update pattern but at least it works :)