Question

我在JavaScript中遇到问题，希望有人能够帮助我。我有一条展开线，它的点数一个接一个地显示出来。我想为线条设置动画，使其跟随here中的动画。到目前为止我已经开发了它，但现在我的动画与上面超链接中的动画不完全相同。任何人都可以帮助我顺利过渡吗？

SELECT 
    pt.regcode, 
    pt.admissionnumber, 
    pt.admissionid, 
    pt.admitdate, 
    pt.dischargedate, 
    wardbed.bedid, 
    bed.bedname, 
    wardbed.ward, 
    DATEDIFF(HOUR, pt.admitdate, pt.dischargedate) AS LOS_Hour, 
    DATEDIFF(DAY, pt.admitdate, pt.dischargedate)  AS LOS_day, 
    (SELECT COUNT(*) FROM v_beds) AS NumberofBeds 
FROM   
    v_bedallocations bed, 
    v_dbpatientadmissions pt, 
    v_beds wardbed  
WHERE  
    pt.admissionnumber = bed.admissionnumber 
    AND pt.admissionid = wardbed.admissionid 
    AND bed.bedname = wardbed.bedname 
GROUP BY 
    bed.bedname, pt.regcode, pt.admissionnumber, 
    pt.admissionid, pt.admitdate, pt.dischargedate, 
    wardbed.bedid, bed.bedname, wardbed.ward

Answer 1

您可以通过创建单一路径

来实现

您的代码循环

在数组
更新数据
更新Axis＆amp;在数组上绘制所有路径和圆圈

我的代码循环

为路径和圈子创建群组持有者
更新数据
更新Axis＆amp;在数组

<强> 可选

如果您想更改动画，可以更改.ease('changeThis') 当你的Axis数据达到最高时更新scale.range，如果出现错误，你会看到某条线没有被认为是

var width = 400,
  height = 400,
  margin = {
    top: 25,
    right: 50,
    bottom: 40,
    left: 50
  },
  uid = 0,
  datasetSize = 3;
var padding = 30;


var dataset = [];
for (var i = 0; i < datasetSize; i++) {
  dataset.push(generateDatum());
}

function generateDatum() {
  return [
    uid++, parseInt(Math.random() * 400), parseInt(Math.random() * 400)
  ];
}

      
      
 var xScale = d3.scaleLinear()
  .range([0, width])
  .domain([0, d3.max(dataset, function(d) {
    return d[1];
  })])

var yScale = d3.scaleLinear()
  .range([height, 0])
  .domain([0, d3.max(dataset, function(d) {
    return d[2];
  })])


var xAxis = d3.axisBottom()
  .scale(xScale)
  .ticks(10);
var yAxis = d3.axisLeft()
  .scale(yScale)
  .ticks(10);
var svg = d3.select("body").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 + ")");

var svgXaxis = svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(0," + (height) + ")")
  .call(xAxis);

var svgYaxis = svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(" + "0)")
  .call(yAxis);

svg.append("g")
  .attr("id", "back")

svg.append("g")
.attr('id',"dott")



function displayLine(data,svg,i) {
      
              
        
        
  var lineGenerator = d3.line()

    .x(function(d) {
      return xScale(d[1])
    })
    .y(function(d) {
      return yScale(d[2])
    })
      

      
  var line = d3.select('#back').selectAll(null)
    .data(data)
    .enter()
    .append("path")
    .attr('d', lineGenerator(data))
    .attr('fill','none')
    .attr( 'stroke',"red")
    .attr( "stroke-width","3px")

  var totalLength = line.node().getTotalLength();

  line.attr("stroke-dasharray", totalLength + " " + totalLength)
    .attr("stroke-dashoffset", totalLength)
    .transition()
    .duration(500)
    .ease(d3.easeLinear) 
    .attr("stroke-dashoffset", 0)
    .on('end',function(d,i){

    d3.select('#dott')
    .append("circle")
    .attr("id", function() {
      return d[0];
    })
    .attr("cx", function() {
      return xScale(d[1]);
    })
    .attr("cy", function() {
      return yScale(d[2]);
    })
    .attr("r", 5)
    .style('opacity', 1e-6)
     .transition()
    .duration(0)
    .style('fill', 'green')
    .style('opacity', function(){
      if(i==1){return 1}else{return 0}
    });

  })
 }
      
      

 
  setInterval(function() {
    var random = generateDatum()
    var newData =[random]

    newData.unshift(dataset[dataset.length - 1])
    dataset.push(random);

    xScale.domain([0, d3.max(dataset, function(d) {
    return d[1];
  })]);
  yScale.domain([0, d3.max(dataset, function(d) {
    return d[2];
  })]);

  svgXaxis.transition()
    .call(xAxis);
  svgYaxis.transition()
    .call(yAxis); 

    displayLine(newData);

      }, 2000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script><script src="https://code.jquery.com/jquery-3.1.0.js"></script><html>
  
  
  
  <body>
    
    
  </body>

d3.js平滑展开路径转换

1 个答案: