Fatal编程技术网
  • javascript/
  • Javascript D3在页面加载时设置图形动画

Javascript D3在页面加载时设置图形动画

javascript animation d3.js

Javascript D3在页面加载时设置图形动画,javascript,animation,d3.js,visualization,Javascript,Animation,D3.js,Visualization,我正试图在页面从左到右的加载过程中使用弹性tween来制作我的d3图表的动画，但我对d3有些陌生，并试图学习，所以我确信这非常简单，但我似乎找不到一个好的例子来帮助我。如果需要帮助，我已经附加了html和json 还想知道是否有人知道如何将边界半径效果应用到每个条的右侧以弯曲边 <html> <head> <script src="http://d3js.org/d3.v3.min.js"></script> <s

我正试图在页面从左到右的加载过程中使用弹性tween来制作我的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}
   ]


.canvas{背景：#03ff01；
高度：30公分；
宽度：70em；
浮动：左；
位置：绝对位置；
z指数：-1；
}
svg{填充顶部：3em；
笔画：黑色；
笔画宽度：1；
形状渲染：CrispEdge；}
d3.json（“mydata2.json”，函数（数据）{
var fill=d3.scale.category10（）；
var canvas=d3.select（“body”）.append（“svg”）
.attr（“宽度”，1000）
.attr（“高度”，1000）
canvas.selectAll（“rect”）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“宽度”，函数（d）{返回d.amount*10；}）
.attr（“高度”，46）
.attr（“y”，函数（d，i）{返回i*50；}）
.style（“fill”，函数（d，i）{返回fill（i）；}）
canvas.selectAll（“文本”）
.数据（数据）
.输入（）
.append（“文本”）
.style（“字体系列”、“影响”）
.style（“字体大小”，函数（d）{返回d.size+“px”；}）
.attr（“填充”、“白色”）
.attr（“x”，函数（d，i）{返回i+10；}）
.attr（“y”，函数（d，i）{返回i*50+28；}）
.text（函数（d）{返回d.name+“：$”+d.amount；}）
})
//JSON文件代码
mydata2.json
[
{“姓名”：“玛丽亚”，“金额”：30}，
{“姓名”：“弗雷德”，“金额”：50}，
{“姓名”：“弗朗西斯”，“金额”：12}，
{“姓名”：“格里”，“金额”：68}，
{“姓名”：“托尼”，“金额”：90}
]
下面是一个非常简单的示例，您可以使用它：

canvas.selectAll("rect")
    .attr("width", 0)
    .transition()
    .delay(function(d, i){ return i*50; })
    .duration(1000)
    .attr("width", function (d) { return d.amount * 10; })
它的工作原理是首先将所有
的宽度设置为
0
，然后创建一个持续1秒（1000毫秒）的动画，将每个
扩展到其全宽。还有一点延迟，因此
的转换不会同时发生


请注意——就像这样——在执行转换之前，您必须将每个
的宽度设置为
0
，这样D3就有了动画的起始值。
感谢您的完美工作，现在尝试应用每个条中显示的文本的相同延迟，以便在加载每个条时淡入。有什么想法或建议吗？再次感谢：）