Question

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

我正在追加一个区域元素，其中d =“”属性是由函数（区域）构建的，我不知道在哪里添加转换。

首先我想在区域功能中这样做，但是失败了。当添加区域元素没有成功时，我也尝试这样做。

这是我的代码：

// 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");

Answer 1

您可以对要设置动画的整个svg元素应用缩放（x，y）变换，而不是尝试在区域图形的形状上使用过渡。这种方法的优点是它不仅限于特定的渲染实现（例如：not path / d3.area specific）。

但有几点需要注意：

为避免转换（）行为，处理边距调整，请确保转换（）转换为单独的'g'元素
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

SVG路径元素.transition（） - 在哪里添加？

1 个答案: