D3 переход Circle Tooltip error

Question

У меня есть многострочный график, поэтому я рисую график с помощью всплывающей подсказки. Кончиками являются круги. Функция, которая составляет

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}); 
} 

Но когда я отфильтровываю диаграмму, мои строки обновляются, а окружность - нет.

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}); 
} 

Я пробовал много разных способов обновить круг. Кто-то может помочь мне решить?

EDIT

заказ скрипка https://jsfiddle.net/rafarorafaro/t22svjkm/

Answer 1

Наконец я сделал это!

在 Обновление 中 操作 круг 的 обновление 才行; 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); });