D3 Y轴缩放与线路径过渡

要实现D3中Y轴缩放与线路径过渡，可以按照以下步骤进行操作：

1. 创建SVG容器和坐标轴：

var margin = {top: 20, right: 20, bottom: 30, left: 50};
var width = 500 - margin.left - margin.right;
var height = 300 - margin.top - margin.bottom;

var svg = d3.select("body")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var xScale = d3.scaleLinear()
  .range([0, width]);

var yScale = d3.scaleLinear()
  .range([height, 0]);

var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);

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

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis);

2. 创建初始线路径：

var line = d3.line()
  .x(function(d) { return xScale(d.x); })
  .y(function(d) { return yScale(d.y); });

var data = [{x: 0, y: 0}, {x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 3}, {x: 4, y: 4}];

svg.append("path")
  .datum(data)
  .attr("class", "line")
  .attr("d", line);

3. 定义Y轴缩放函数和过渡效果：

var scaleY = d3.scaleLinear()
  .range([height, 0])
  .domain([0, d3.max(data, function(d) { return d.y; })]);

d3.selectAll(".line")
  .transition()
  .attr("d", line.y(function(d) { return scaleY(d.y); }))
  .duration(1000);

完整的示例代码如下：

var margin = {top: 20, right: 20, bottom: 30, left: 50};
var width = 500 - margin.left - margin.right;
var height = 300 - margin.top - margin.bottom;

var svg = d3.select("body")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var xScale = d3.scaleLinear()
  .range([0, width]);

var yScale = d3.scaleLinear()
  .range([height, 0]);

var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);

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

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis);

var line = d3.line()
  .x(function(d) { return xScale(d.x); })
  .y(function(d) { return yScale(d.y); });

var data = [{x: 0, y: 0}, {x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 3}, {x: 4, y: 4}];

svg.append("path")
  .datum(data)
  .attr("class", "line")
  .attr("d", line);

var scaleY = d3.scaleLinear()
  .range([height, 0])
  .domain([0, d3.max(data, function(d) { return d.y; })]);

d3.selectAll(".line")
  .transition()
  .attr("d", line.y(function(d) { return scaleY(d.y); }))
  .duration(1000);

在上述示例中，我们首先创建了一个SVG容器和坐标轴，然后定义了初始的线路径。接下来，我们创建了一个Y轴缩放函数，并使用过