D3对页面上的图形进行动画处理

debugcn 发表于 Dev

布莱恩·TGT

我正在尝试使用弹性补间从左到右对页面的负载进行d3动画处理，但是我对d3有点陌生并尝试学习，因此我敢肯定这很简单，但是我似乎找不到一个很好的例子来帮助我。如果需要帮助，我附上了html和json。

还好奇是否有人知道如何在每个条形的右侧应用边框半径效果以使边缘弯曲？

  <html>


   <head>
   <script src="http://d3js.org/d3.v3.min.js"></script>

   <style>
    .canvas {background: #03ff01;
      height: 30em;
      width:70em;
      float: left;
      position: absolute;
      z-index:-1;
     }

     svg {padding-top:3em;
      stroke:black;
      stroke-width:1;
      shape-rendering: crispEdges;}

  </style>
  </head>

  <body>
  <div class = "canvas">
  <script>

  d3.json("mydata2.json", function(data){

    var fill = d3.scale.category10();

    var canvas = d3.select("body").append("svg")
      .attr("width", 1000)
      .attr("height", 1000)

      canvas.selectAll("rect")
      .data(data)
      .enter()
        .append("rect")
        .attr("width", function (d) { return d.amount * 10; })
        .attr("height", 46)
        .attr("y", function (d, i) {return i * 50;})
        .style("fill", function(d, i) { return fill(i); })


        canvas.selectAll("text")
          .data(data)
          .enter()
              .append("text")
              .style("font-family", "Impact")
              .style("font-size", function(d) { return d.size + "px"; })
              .attr("fill", "White")
              .attr("x", function (d, i) {return i + 10; })
              .attr("y", function (d, i) {return i * 50 + 28; })
              .text (function (d) {return d.name +": $" +d.amount;})


     })
   </script>
   </div>
   </body>
   </html>


   //JSON FILE CODE
   mydata2.json
   [
     {"name": "Maria", "amount": 30},
     {"name": "Fred", "amount": 50},
     {"name": "Francis", "amount": 12},
     {"name": "Gerry", "amount": 68},
     {"name": "Tony", "amount": 90}
   ]

mdml

这是一个非常简单的示例，您可以尝试：

canvas.selectAll("rect")
    .attr("width", 0)
    .transition()
    .delay(function(d, i){ return i*50; })
    .duration(1000)
    .attr("width", function (d) { return d.amount * 10; })

首先，将所有<rect>s的宽度设置为0，然后创建一个持续1秒（1000毫秒）的动画，以将每个s扩展至其完整宽度。还有一点延迟，因此<rect>s的转换不会全部同时发生。

需要注意的是-就像在这个SO问题-你必须每一个的宽度设定<rect>来0执行转换前，因此D3具有动画起始值。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。