CODEWITHSUNDEEP
javascriptd3.js
yavg
yavg

Reputation: 3051

to resize the existing lines in a bar chart

I'm painting some lines in a line chart. if any value on the y axis exceeds 250 or -250, I would like the lines already painted to be resized. how can I do it?

enter image description here

function display(data){


   var maxY = d3.max(data, function(c) {
    return d3.max(c.values, function(d) {
      return Math.abs(d.corriente);
    });
  });

if(maxY>limit){
   y.domain([-maxY, maxY]);

  svg.select(".axisX")
    .transition()
    .duration(750)
    .ease("sin-in-out")
    .call(xAxis);

  svg.select(".axisY")
    .transition()
    .duration(750)
    .ease("sin-in-out")
    .call(yAxis);
}


  var path = g.selectAll(null)
    .data(oData, function(d) { return d.ciclo; })
    .enter()
    .append("path")
    .attr("d", function(d) {
      return line(d.values)
    })
    .attr("class", function(d) {
      return "line " + d.ciclo;
    })

  path.each(function(d) {
    var totalLength = this.getTotalLength();
    d3.select(this)
      .attr("stroke-dasharray", totalLength + " " + totalLength)
      .attr("stroke-dashoffset", totalLength)
      .transition()
      .duration(4000)
      .attr("stroke-dashoffset", 0);
  })

}
display(oData);

http://plnkr.co/edit/4a4XqScCfjTN4gM6YyOo?p=preview

Upvotes: 1

Views: 21

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

You need to update the existing paths:

g.selectAll(".line")
    .transition()
    .duration(750)
    .attr("d", function(d) {
        return line(d.values)
    })

Here is the updated plunker: http://plnkr.co/edit/w0INQyy3hEcuzvP5J8FR?p=preview

Upvotes: 1

Related Questions