D3动画图onOoad

我试图从左到右使用可能弹性补间的页面负载动画我的d3图，但我有点新的d3，并试图学习，所以我相信这是很简单，但我似乎无法找到一个很好的例子来帮助我。如果需要帮助，我附上了html和json。D3动画图onOoad

也很好奇，如果有人知道如何将边框半径效果应用到每个条的右侧来曲线的边缘？

<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} 
    ]

来源

2014-11-14 BrianTGT

这里是一个非常简单的例子，你可以玩的：

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毫秒）以将它们中的每一个扩展到其全宽。还有一点点延迟，因此<rect>的转换不会同时发生。

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

来源

2014-11-14 15:21:03 mdml

非常感谢你的工作，试图现在应用相同延迟的文本出现在每个栏内淡入当每个栏加载。任何想法或建议？再次感谢：） – BrianTGT 2014-11-16 19:25:34

D3动画图onOoad

回答

相关问题