调整条形图中现有线的大小

时间:2017-10-09 01:05:27

标签: javascript d3.js

我在折线图中绘制了一些线条。如果y轴上的任何值超过250或-250,我希望已经绘制的线被调整大小。我怎么能这样做?

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

1 个答案:

答案 0 :(得分:1)

您需要更新现有路径:

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

以下是更新的plunker:http://plnkr.co/edit/w0INQyy3hEcuzvP5J8FR?p=preview