Перемещение меток с вращающейся осью с D3

Question

Я пытаюсь создать график, который обновляется по мере поступления новых значений. Чтобы метки на оси X были читаемыми, я решил слегка их повернуть, чтобы они не перекрытия.

Когда есть новое значение, оно нарисовано на графике, тогда путь (фактически контейнер) переводится влево при переходе.

Это, как я создать повернутые метки осей:

svg.select(".x.axis") 
     .call(this.xAxis) 
     .selectAll("text") 
      .style("text-anchor", "end") 
      .attr("dx", "-.8em") 
      .attr("dy", ".15em") 
      .attr("transform", this.axislabelrotation); 

this.axislabelrotation является:

function(d) { 
    return "rotate(-35)" 
} 

И это, как я переведет ось X:

svg = svg.transition().duration(750); 
    svg.select(".x.axis") // change the x axis 
     .call(this.xAxis) 
     .selectAll("text") 
      .style("text-anchor", "end") 
      .attr("dx", "-.8em") 
      .attr("dy", ".15em") 
      .attr("transform", this.axislabelrotation); 

Хотя сейчас У меня есть два вопроса:

1. В начале перехода метки X-оси сбрасываются на несколько пикселей, во время перехода они возвращаются вверх.
2. Вновь введенные метки («2015» в примере) не вращаются в начале перехода, но вращаются в нужное состояние во время перехода.

Пример: http://jsfiddle.net/esy6wk8n/2/

Answer 1

Я хотел бы предложить, что вы удалите переход на атрибут dy и transform.

Эта обновленная скрипка может помочь вам в этом: http://jsfiddle.net/esy6wk8n/4/

изменения все в вашей update функции.

var no_trans = svg; 
    svg = svg.transition().duration(750); 

    lp.transition() 
     .duration(750) 
     .attr("transform", "translate(" + this.x(data[0].jdate) + ")"); 

    lu.transition() 
     .duration(750) 
     .attr("transform", "translate(" + this.x(data[0].jdate) + ")"); 

    svg.select(".x.axis") // change the x axis 
     .call(this.xAxis) 
     .selectAll("text") 
      .style("text-anchor", "end") 
      .attr("dx", "-.8em"); 
      //.attr("dy", ".15em") 
      //.attr("transform", this.axislabelrotation); 

    no_trans.select(".x.axis") 
     .selectAll("text") 
      .attr("dy", ".15em") 
      .attr("transform", this.axislabelrotation); 

В принципе, я переместил обновление атрибутов dy и transform из перехода, поэтому, следовательно, эти значения будут установлены сразу и не могут быть изменены в рамках переходного периода, сохраняя dy и transform стабильной на протяжении всего переходного периода.