4

基本上，我希望我的图表从 x 轴开始，并在两秒内增长到实际数据值。这可能是一件简单的事情，但我似乎无法让它发挥作用。

我正在附加一个区域元素，其中 d="" 属性是由一个函数（区域）构建的，我不确定在哪里添加过渡。

首先我想在 area 函数中这样做，但是失败了。当添加区域元素但未成功时，我也尝试过这样做。

这是我的代码：

// Create the area element for each object - a function that will be passed to "path"
var area = d3.svg.area()
    .x(function(d) { return x(d.year); })
    .y0(height)
    //.y1(height)
    //.transition()
    //.duration(2000)
    .y1(function(d) { return y(d.average); });

// build the container SVG element
var svg = d3.select("#co2").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 + ")")

svg.append("path") 
    // pull in data to the path 
    .datum(data)
    .attr("class", "area")
    // passing in the area function, for each object
    .attr("d", area)
    // starts the graph opacity at 0 and fades to 1 over 2.5 seconds
    .style("fill-opacity", "0")
    .transition()
    .duration(2500)
    .style("fill-opacity", "1");
4

1 回答 1

5

与其尝试在区域图的形状上使用过渡，不如对要设置动画的整个 svg 元素应用 scale(x,y) 变换。这种方法的优点是它不限于特定的渲染实现（例如：不是 path/d3.area 特定的）。

不过，有几个问题需要注意：

  • 为避免 transition() 行为，进行边距调整，请确保您有一个单独的 'g' 元素供 transition() 转换操作

  • SVG 的原点 (0,0) 在左上角，所以除了缩放 SVG 区域外，还需要设置图形的底部

这放在下面：

“g”元素： 

var svg = d3.select("#co2").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 + ")")
    // define a new 'g' to scope the transition, and keep separate from the margin adjusting transform above
    .append("g");

transition() 包括基础调整：

svg
  .attr("transform", "translate(0," + height + ") scale(1, 0)")
.transition().duration(2000)
  .attr("transform", "translate(0,0) scale(1, 1)");

与以往一样，最好用完整的例子来说明这一点：http: //bl.ocks.org/4239516

于 2012-12-08T10:41:08.140 回答