Question

我正在使用d3。过渡函数，用于为矩形的高度设置动画，但它会从顶部到底部进行动画处理。您能帮我从下到上制作动画吗？这是示例代码

var h = 500,w = 800;
var svg = d3.select("body").append("svg").attr("height", h).attr("width", w).append("g");
var yScale = d3 .scaleLinear().domain([0, 37]).range([0, h * 0.9]);

var filtereddata = [12,20,37]
var xScale = d3
.scaleBand()
.domain(d3.range(filtereddata.length))
.rangeRound([0, w])
.paddingInner(0.3);

  svg
    .selectAll("recty")
    .data([12,20,37])
    .join("rect")
    .attr("width", d => xScale.bandwidth())
    .attr("x", (d, i) => xScale(i))
    .attr("y", (d, i) => {return h * 0.9 - yScale(d);})
    .style("fill", "orange")
    .transition()
    .duration(2000)
    .attr("height", d => yScale(d))

Answer 1

一种方法是从底部开始y位置，然后在增加高度的同时过渡y up 。这是一个完整的工作示例，其中包含这两项更改。

var h = 500, w = 800;
var svg = d3.select("body").append("svg").attr("height", h).attr("width", w).append("g");
var yScale = d3.scaleLinear().domain([0, 37]).range([0, h * 0.9]);

var filtereddata = [12, 20, 37]
var xScale = d3
  .scaleBand()
  .domain(d3.range(filtereddata.length))
  .rangeRound([0, w])
  .paddingInner(0.3);

svg
  .selectAll("recty")
  .data([12, 20, 37])
  .enter()
  .append("rect")
  .attr("width", d => xScale.bandwidth())
  .attr("x", (d, i) => xScale(i))
  .attr("y", (d, i) => {
    return h * 0.9;
  })
  .style("fill", "orange")
  .transition()
  .duration(2000)
  .attr("height", d => yScale(d))
  .attr("y", (d, i) => {
    return h * 0.9 - yScale(d);
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Answer 2

我相信我制作的JSFiddle中的代码段应该可以满足您的要求-如果不起作用或有任何疑问，请告诉我！如果您需要更多信息，请根据another question的答案改编答案。

从您的代码中，将转换事件更改为：

.attr("y", (d, i) => {return h - yScale(d);});

并在转换之前添加以下内容：

.attr("height", d => yScale(d))
.attr("y", h)

向上动画矩形的高度属性D3.JS

2 个答案: