1. ホーム
  2. 質問と答え
  3. D3のSVG要素をグループ化する

D3のSVG要素をグループ化する

2017-11-28 20 views
0

D3に車を実装しました。情報グラフィックしかしながら;私のコンテナではかなり大きく、アニメーション化されていません。私はこれらの要素をグループ化し、スケールダウンして、&を最終的にアニメーション化してループ内または連続して移動したいと考えています。基本的に、車をはるかに小さくして、ページの周りを自由に動かすことができます。D3のSVG要素をグループ化する

d3.select('#dataVizContainer svg').append("rect") 
    .attr('id', 'rect1') 
    .attr("fill", "transparent") 
    .attr("stroke", "#99C863") 
    .style('stroke-width', '10px') 
    .attr("width", 210) 
    .attr("height", 130) 
    .attr("opacity", 0) 
    ; 

d3.select('#rect1') 
    .transition() 
    .attr("x", 70) 
    .attr("y", 10) 
    .attr('rx', 150) 
    .attr("fill", "transparent") 

    .delay(2000) 
    .duration(12000) 
    .attr("opacity", 1); 


d3.select('#dataVizContainer svg').append('line').attr('id', 'line') 
    .attr('x1', 145).attr('y1', 10).attr('x2', 145).attr('y2', 80) 
    .style('stroke', '#99C863').style('stroke-width', '10px').attr("opacity", 0); 
//Animation 
d3.select('#line') 
    .transition() 
    .delay(2000) 
    .duration(12000) 
    .attr("opacity", 1); 

d3.select('#dataVizContainer svg').append('line').attr('id', 'line2') 
    .attr('x1', 215).attr('y1', 10).attr('x2', 215).attr('y2', 80) 
    .style('stroke', '#99C863').style('stroke-width', '10px').attr("opacity", 0); 
//Animation 
d3.select('#line2') 
    .transition() 
    .delay(2000) 
    .duration(12000) 
    .attr("opacity", 1); 


d3.select('#dataVizContainer svg').append("rect") 
    .attr('id', 'rect2') 
    .attr("fill", "transparent") 
    .attr("stroke", "#8C8C93") 
    .style('stroke-width', '10px') 
    .attr("width", 340) 
    .attr("height", 80) 
    .attr("opacity", 0) 
    ; 
d3.select('#rect2') 
    .transition() 
    .attr("x", 10) 
    .attr("y", 70) 
    .attr('rx', 30) 
    .attr("fill", "#8C8C93") 
    .delay(2000) 
    .duration(8000) 
    .attr("opacity", 1); 

d3.select('#dataVizContainer svg').append("rect") 
    .attr('id', 'rect3') 
    .attr("fill", "transparent") 
    .attr("stroke", "crimson") 
    .style('stroke-width', '10px') 
    .attr("width", 40) 
    .attr("height", 20) 
    .attr("opacity", 0) 
    ; 
d3.select('#rect3') 
    .transition() 
    .attr("x", 0) 
    .attr("y", 110) 
    .attr('rx', 10) 
    .attr("fill", "#999") 

    .delay(2000) 
    .duration(12000) 
    .attr("opacity", 1); 

d3.select('#dataVizContainer svg').append("rect") 
    .attr('id', 'rect4') 
    .attr("fill", "transparent") 
    .attr("stroke", "crimson") 
    .style('stroke-width', '10px') 
    .attr("width", 40) 
    .attr("height", 20) 
    .attr("opacity", 0) 
    ; 

//Draw the Rectangle 
d3.select('#rect4') 
    .transition() 
    .attr("x", 325) 
    .attr("y", 110) 
    .attr('rx', 10) 
    .attr("fill", "#999") 

    .delay(2000) 
    .duration(12000) 
    .attr("opacity", 1); 
// Left wheel 
d3.select('#dataVizContainer svg').append('circle') 
    .attr('id', 'C14') 
    .attr('cx', 90) 
    .attr('cy', 140) 
    .attr('r', 40) 
    .style('stroke-width', '7px') 
    .attr("opacity", 0) 
    ; 

d3.select('#C14') 
    .transition() 
    .attr("r", "40") 
    .delay(4000) 
    .ease(d3.easeBounce) 
    .duration(12000) 
    .attr("opacity", 1) 
    .attr("fill", "#222") 
    ; 

// Rims of the Left Wheel 
d3.select('#dataVizContainer svg').append('circle') 
    .attr('id', 'C15') 
    .attr('cx', 90) 
    .attr('cy', 140) 
    .attr('r', 15) 
    .attr("opacity", 0) 
    ; 

d3.select('#C15') 
    .transition() 
    .delay(7000) 
    .ease(d3.easeBounce) 
    .duration(12000) 
    .attr("opacity", 1) 
    .attr("fill", "#555") 
    .attr("r", "15") 

    ; 

//Left Wheel Code Ended 

//Right Wheel Started 
d3.select('#dataVizContainer svg').append('circle') 
    .attr('id', 'C16') 
    .attr('cx', 270) 
    .attr('cy', 140) 
    .attr('r', 40) 
    .style('stroke-width', '7px') 
    .attr("opacity", 0) 
    ; 

d3.select('#C16') 
    .transition() 
    .attr("r", "40") 
    .delay(4000) 
    .ease(d3.easeBounce) 
    .duration(12000) 
    .attr("opacity", 1) 
    .attr("fill", "#222") 
    ; 

// Rims of the Right Wheel 
d3.select('#dataVizContainer svg').append('circle') 
    .attr('id', 'C17') 
    .attr('cx', 270) 
    .attr('cy', 140) 
    .attr('r', 15) 
    .attr("opacity", 0) 
    ; 

d3.select('#C17') 
    .transition() 
    .delay(7000) 
    .ease(d3.easeBounce) 
    .duration(12000) 
    .attr("opacity", 1) 
    .attr("fill", "#555") 
    .attr("r", "15") 

    ; 
//Right Wheel Code Ended

出典

2017-11-28 Kam

答えて

1

ここに行く：私は、SVGグループに車を入れて、少しあなたのコードを変更し、最後に私はあなたにもそのような車の要素への変換のすべての種類を追加することができますあなたの車の動きを作っ：https://developer.mozilla.org/fr/docs/Web/CSS/transform

<!DOCTYPE html> 
<meta charset="utf-8"> 

<body> 

<!-- load the d3.js library --> 
<script type="text/javascript" src="http://d3js.org/d3.v4.min.js"> 
</script> 
<div id="dataVizContainer"> 
    <svg height="1000" width="1000" ></svg> 
</div> 
<script> 
    var car = d3.select('svg') 
     .append("g"); 

    car.append("rect") 
     .attr('id', 'rect1') 
     .attr("fill", "transparent") 
     .attr("stroke", "#99C863") 
     .style('stroke-width', '10px') 
     .attr("width", 210) 
     .attr("height", 130) 
     .attr("opacity", 0) 
    ; 

    d3.select('#rect1') 
     .transition() 
     .attr("x", 70) 
     .attr("y", 10) 
     .attr('rx', 150) 
     .attr("fill", "transparent") 

     .delay(2000) 
     .duration(12000) 
     .attr("opacity", 1); 


    car.append('line').attr('id', 'line') 
     .attr('x1', 145).attr('y1', 10).attr('x2', 145).attr('y2', 80) 
     .style('stroke', '#99C863').style('stroke-width', '10px').attr("opacity", 0); 
    //Animation 
    d3.select('#line') 
     .transition() 
     .delay(2000) 
     .duration(12000) 
     .attr("opacity", 1); 

    car.append('line').attr('id', 'line2') 
     .attr('x1', 215).attr('y1', 10).attr('x2', 215).attr('y2', 80) 
     .style('stroke', '#99C863').style('stroke-width', '10px').attr("opacity", 0); 
    //Animation 
    d3.select('#line2') 
     .transition() 
     .delay(2000) 
     .duration(12000) 
     .attr("opacity", 1); 


    car.append("rect") 
     .attr('id', 'rect2') 
     .attr("fill", "transparent") 
     .attr("stroke", "#8C8C93") 
     .style('stroke-width', '10px') 
     .attr("width", 340) 
     .attr("height", 80) 
     .attr("opacity", 0) 
    ; 
    d3.select('#rect2') 
     .transition() 
     .attr("x", 10) 
     .attr("y", 70) 
     .attr('rx', 30) 
     .attr("fill", "#8C8C93") 
     .delay(2000) 
     .duration(8000) 
     .attr("opacity", 1); 

    car.append("rect") 
     .attr('id', 'rect3') 
     .attr("fill", "transparent") 
     .attr("stroke", "crimson") 
     .style('stroke-width', '10px') 
     .attr("width", 40) 
     .attr("height", 20) 
     .attr("opacity", 0) 
    ; 
    d3.select('#rect3') 
     .transition() 
     .attr("x", 0) 
     .attr("y", 110) 
     .attr('rx', 10) 
     .attr("fill", "#999") 

     .delay(2000) 
     .duration(12000) 
     .attr("opacity", 1); 

    car.append("rect") 
     .attr('id', 'rect4') 
     .attr("fill", "transparent") 
     .attr("stroke", "crimson") 
     .style('stroke-width', '10px') 
     .attr("width", 40) 
     .attr("height", 20) 
     .attr("opacity", 0) 
    ; 

    //Draw the Rectangle 
    d3.select('#rect4') 
     .transition() 
     .attr("x", 325) 
     .attr("y", 110) 
     .attr('rx', 10) 
     .attr("fill", "#999") 

     .delay(2000) 
     .duration(12000) 
     .attr("opacity", 1); 
    // Left wheel 
    car.append('circle') 
     .attr('id', 'C14') 
     .attr('cx', 90) 
     .attr('cy', 140) 
     .attr('r', 40) 
     .style('stroke-width', '7px') 
     .attr("opacity", 0) 
    ; 

    d3.select('#C14') 
     .transition() 
     .attr("r", "40") 
     .delay(4000) 
     .ease(d3.easeBounce) 
     .duration(12000) 
     .attr("opacity", 1) 
     .attr("fill", "#222") 
    ; 

    // Rims of the Left Wheel 
    car.append('circle') 
     .attr('id', 'C15') 
     .attr('cx', 90) 
     .attr('cy', 140) 
     .attr('r', 15) 
     .attr("opacity", 0) 
    ; 

    d3.select('#C15') 
     .transition() 
     .delay(7000) 
     .ease(d3.easeBounce) 
     .duration(12000) 
     .attr("opacity", 1) 
     .attr("fill", "#555") 
     .attr("r", "15") 

    ; 

    //Left Wheel Code Ended 

    //Right Wheel Started 
    car.append('circle') 
     .attr('id', 'C16') 
     .attr('cx', 270) 
     .attr('cy', 140) 
     .attr('r', 40) 
     .style('stroke-width', '7px') 
     .attr("opacity", 0) 
    ; 

    d3.select('#C16') 
     .transition() 
     .attr("r", "40") 
     .delay(4000) 
     .ease(d3.easeBounce) 
     .duration(12000) 
     .attr("opacity", 1) 
     .attr("fill", "#222") 
    ; 

    // Rims of the Right Wheel 
    car.append('circle') 
     .attr('id', 'C17') 
     .attr('cx', 270) 
     .attr('cy', 140) 
     .attr('r', 15) 
     .attr("opacity", 0) 
    ; 

    d3.select('#C17') 
     .transition() 
     .delay(7000) 
     .ease(d3.easeBounce) 
     .duration(12000) 
     .attr("opacity", 1) 
     .attr("fill", "#555") 
     .attr("r", "15") 

    ; 
    //here i scale down the car 
    car.attr("transform", "scale(0.1)") 
    //here i mak eit move (after your fade in animation) 
    car.transition().delay(12000).duration(5000).attr("transform", "scale(0.1) translate(8000,0)") 

    //Right Wheel Code Ended 
</script> 
</body>

出典

2017-11-28 17:40:16

関連する問題

 関連する問題