D3过渡圈工具提示错误

Question

I have multiline chart, so I plot the chart with tooltip. The tips are circles. The function that plot is

function renderStates(localArr) {
    x.domain([
        d3.min(localArr, function (c) {
            return d3.min(c.values, function (v) {
                return v.date;
            });
        }),
        d3.max(localArr, function (c) {
            return d3.max(c.values, function (v) {
                return v.date;
            });
        })
    ]);

    y.domain([
        d3.min(localArr, function (c) {
            return d3.min(c.values, function (v) {
                return v.cost;
            });
        }),
        d3.max(localArr, function (c) {
            return d3.max(c.values, function (v) {
                return v.cost;
            });
        })
    ]);
    var container = '#container-graph-state';
    var svg = d3.select(container).append("svg")
            .attr("width", width2 + margin.left + margin.right)
            .attr("height", height2 + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height2 + ")")
            .call(xAxis);

    svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Total(R$)");

    var city = svg.selectAll(".city")
            .data(localArr)
            .enter().append("g")
            .attr("class", "city");

    city.append("path")
            .attr("class", "line")
            .attr("d", function (d) {
                return lineCost(d.values);
            })
            .style("stroke", function (d) {
                return colorMultiline(d.group);
            })
            .transition()
            .duration(2000)
            ;

    city.append("text")
            .datum(function (d) {                    
                return {name: d.name, value: d.values[d.values.length - 1]};                    
            })
            .attr("transform", function (d) {
                return "translate(" + x(d.value.date) + "," + y(d.value.cost) + ")";
            })
            .attr("class", 'textname')
            .attr("x", 3)
            .attr("dy", ".35em")
            .text(function (d) {
                return d.name;
            });
    city.selectAll("circle")
            .data(function (d) {
                return(d.values);
            })
            .enter()
            .append("circle")
            .attr("class", "tipcircle")
            .attr("cx", function (d, i) {
                return x(d.date);
            })
            .attr("cy", function (d, i) {
                return y(d.cost);
            })
            .attr("r", 12)
            .style('opacity', 1e-6)//1e-6
            .attr("title", maketip);
    $('circle').tipsy({opacity: .9, gravity: 'n', html: true});
}

But when I filter the chart my lines are updated and circle didn't.

function reRenderStates(localArr, container) {


    var svg = d3.select(container)
            .select("svg g");


    svg.selectAll(".y.axis").transition().duration(300).ease("linear").call(yAxis);
    svg.selectAll(".x.axis").transition().duration(300).ease("linear").call(xAxis);



    var t01 = svg.selectAll(".city")
            .data(localArr, function key(d) {
                return d.name;
            });

    var t01Enter = t01.enter().append("g")
            .attr("class", "city");

    t01Enter.append("path")
            .attr("class", "line")
            .attr("d", function (d) {
                return lineCost(d.values);
            })
            .style("stroke", function (d) {
                return colorMultiline(d.group);
            })
            .transition().duration(750);

    t01Enter.append("text")
            .attr("class", "textEnd")
            .datum(function (d) {
                return {name: d.name, value: d.values[d.values.length - 1]};                  
            })
            .attr("transform", function (d) {
                return "translate(" + x(d.value.date) + "," + y(d.value.cost) + ")";
            })
            .attr("x", 3)
            .attr("dy", ".35em")
            .text(function (d) {
                return d.name;
            })
            .transition().duration(750);

    t01Enter.selectAll("circle")
            .data(function (d) {
                return(d.values);
            })
            .enter()
            .append("circle")
            .attr("class", "tipcircle")
            .attr("cx", function (d, i) {
                return x(d.date);
            })
            .attr("cy", function (d, i) {
                return y(d.cost);
            })
            .attr("r", 12)
            .style('opacity', 1e-6)//1e-6
            .attr("title", maketip)
            .transition().duration(750);

    t01.exit().transition().duration(750).remove();

    // Then transition the y-axis.
    var t1 = t01.transition();

    svg.transition().duration(750).transition().selectAll(".y.axis").call(yAxis);
    t1.select(".line").attr("d", function (d) {
        return lineCost(d.values);
    });

    t1.select("text")
            .attr("transform", function (d) {
                    return "translate(" + x(d.values[d.values.length - 1].date) + "," + y(d.values[d.values.length - 1].cost) + ")";
            });

    $('circle').tipsy({opacity: .9, gravity: 'n', html: true});
}

I have tried many different ways to update the circle. Someone can help me to solve?

EDIT

Checkout the fiddle https://jsfiddle.net/rafarorafaro/t22svjkm/

Answer 1

Finally I've done it!

在Update中操作circle的update才行; here

//line 272 add code t1.selectAll("circle").attr("cx", function (d, i) { return x(d.date); }) .attr("cy", function (d, i) { return y(d.cost); });