Created
October 22, 2014 09:22
-
-
Save daohodac/cc3e6fd6d1fae9ba909b to your computer and use it in GitHub Desktop.
D3: intercalate a <g> between parent and selected element
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <script src="http://d3js.org/d3.v3.js"></script> | |
| <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> | |
| <script> | |
| $(function() { | |
| var blink = function(what) { | |
| what.transition().duration(1000).attr('opacity', 0).transition().duration(500).attr('opacity', 1).each('end', function() { | |
| blink(what) | |
| }) | |
| } | |
| var holder = $('#seconds')[0].parentNode; | |
| console.log(holder) | |
| var secs = $('#seconds').detach(); | |
| var group = d3.select(holder).append('g').attr('id', 'azerty'); | |
| $(group.node()).append(secs); | |
| var bbox = secs[0].getBBox(); | |
| var rect = group.append("svg:rect"); | |
| rect.attr("x", bbox.x) | |
| .attr("y", bbox.y) | |
| .attr("width", bbox.width) | |
| .attr("height", bbox.height) | |
| .attr('transform', secs.attr('transform')) | |
| .style("fill", "#ccc") | |
| .style("fill-opacity", ".0") | |
| .style("stroke", "#FF0000") | |
| .style("stroke-width", "2px"); | |
| //rect | |
| blink(rect); | |
| group.transition().attr('transform', 'rotate(5)') | |
| }) | |
| </script> | |
| <body> | |
| <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" | |
| xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" | |
| width="50%" height="801" viewBox="-2 -1 802 801" | |
| id="svg2"> | |
| <defs id="defs4"/> | |
| <g transform="translate(85.7143, -78.0765)" id="layer1" style="display: inline;"> | |
| <path d="M 796.16782,429.51929 A 384.03629,372.48679 0 1 1 28.095245,429.51929 A 384.03629,372.48679 0 1 1 796.16782,429.51929 z" transform="matrix(1.04487, 0, 0, 1.07065, -116, 17.5453)" id="path3288" style="overflow: visible; marker: none; opacity: 1; fill: rgb(255, 255, 255); fill-opacity: 1; fill-rule: evenodd; stroke: rgb(0, 0, 0); stroke-width: 0.121965; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0pt; stroke-opacity: 1; visibility: visible; display: inline;"/> | |
| <g id="g3180"> | |
| <rect width="13.745957" height="35.259808" x="356.12924" y="88.684883" transform="matrix(0.996096, 0.0882794, -0.0882794, 0.996096, 0, 0)" id="rect2400" style="overflow: visible; marker: none; opacity: 1; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: evenodd; stroke: none; stroke-width: 0.5; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0pt; stroke-opacity: 1; visibility: visible; display: inline;"/> | |
| <rect width="13.74596" height="35.259808" x="402.14154" y="41.126842" transform="matrix(0.97767, 0.210144, -0.210144, 0.97767, 0, 0)" id="rect3172" style="overflow: visible; marker: none; opacity: 1; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: evenodd; stroke: none; stroke-width: 0.5; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0pt; stroke-opacity: 1; visibility: visible; display: inline;"/> | |
| <rect width="13.745959" height="35.259808" x="441.40332" y="-0.64356124" transform="matrix(0.952779, 0.303664, -0.303664, 0.952779, 0, 0)" id="rect3174" style="overflow: visible; marker: none; opacity: 1; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: evenodd; stroke: none; stroke-width: 0.5; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0pt; stroke-opacity: 1; visibility: visible; display: inline;"/> | |
| <rect width="13.74596" height="35.259808" x="472.91574" y="-81.153206" transform="matrix(0.887771, 0.460285, -0.460285, 0.887771, 0, 0)" id="rect3176" style="overflow: visible; marker: none; opacity: 1; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: evenodd; stroke: none; stroke-width: 0.5; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0pt; stroke-opacity: 1; visibility: visible; display: inline;"/> | |
| <rect width="27.705935" height="85.763885" x="498.01544" y="-104.13171" transform="matrix(0.865233, 0.50137, -0.50137, 0.865233, 0, 0)" id="rect3178" style="overflow: visible; marker: none; opacity: 1; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: evenodd; stroke: none; stroke-width: 0.5; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0pt; stroke-opacity: 1; visibility: visible; display: inline;"/> | |
| </g> | |
| <use transform="matrix(0.862442, 0.506156, -0.506156, 0.862442, 282.195, -98.3657)" id="use3187" x="0" y="0" width="744.09448" height="1052.3622" xlink:href="#g3180"/> | |
| <use transform="matrix(-0.0316159, 0.9995, -0.9995, -0.0316159, 807.789, 161.136)" id="use3193" x="0" y="0" width="744.09448" height="1052.3622" xlink:href="#g3180"/> | |
| <use transform="matrix(-0.495114, 0.868828, -0.868828, -0.495114, 884.22, 435.129)" id="use3195" x="0" y="0" width="744.09448" height="1052.3622" xlink:href="#g3180"/> | |
| <use transform="matrix(0.468833, -0.883287, 0.883287, 0.468833, -246.475, 525.918)" id="use3199" x="0" y="0" width="744.09448" height="1052.3622" xlink:href="#g3180"/> | |
| <use transform="matrix(-0.00102917, -0.999999, 0.999999, -0.00102917, -163.621, 795.901)" id="use3201" x="0" y="0" width="744.09448" height="1052.3622" xlink:href="#g3180"/> | |
| <g id="g3246"> | |
| <rect width="13.745956" height="35.259808" x="83.825287" y="207.74258" transform="matrix(0.906092, -0.42308, 0.42308, 0.906092, 0, 0)" id="rect3231" style="overflow: visible; marker: none; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: evenodd; stroke: none; stroke-width: 0.5; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0pt; stroke-opacity: 1; visibility: visible; display: inline;"/> | |
| <rect width="13.745959" height="35.259804" x="146.55168" y="192.7778" transform="matrix(0.951256, -0.308404, 0.308404, 0.951256, 0, 0)" id="rect3233" style="overflow: visible; marker: none; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: evenodd; stroke: none; stroke-width: 0.5; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0pt; stroke-opacity: 1; visibility: visible; display: inline;"/> | |
| <rect width="13.745957" height="35.259804" x="201.66933" y="175.0033" transform="matrix(0.976612, -0.215009, 0.215009, 0.976612, 0, 0)" id="rect3235" style="overflow: visible; marker: none; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: evenodd; stroke: none; stroke-width: 0.5; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0pt; stroke-opacity: 1; visibility: visible; display: inline;"/> | |
| <rect width="13.74596" height="35.259808" x="262.70715" y="141.97794" transform="matrix(0.996824, -0.0796395, 0.0796395, 0.996824, 0, 0)" id="rect3237" style="overflow: visible; marker: none; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: evenodd; stroke: none; stroke-width: 0.5; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0pt; stroke-opacity: 1; visibility: visible; display: inline;"/> | |
| <rect width="26.694605" height="106.97702" x="303.15683" y="119.95148" transform="matrix(1, -5.49364e-05, 5.49364e-05, 1, 0, 0)" id="rect3239" style="overflow: visible; marker: none; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: evenodd; stroke: none; stroke-width: 0.5; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0pt; stroke-opacity: 1; visibility: visible; display: inline;"/> | |
| </g> | |
| <use transform="matrix(0.0228643, 0.999739, -0.999739, 0.0228643, 787.641, 152.916)" id="use3253" x="0" y="0" width="744.09448" height="1052.3622" xlink:href="#g3246"/> | |
| <use transform="matrix(-0.999127, 0.041777, -0.041777, -0.999127, 638.761, 938.788)" id="use3255" x="0" y="0" width="744.09448" height="1052.3622" xlink:href="#g3180"/> | |
| <use transform="matrix(-1, 0, 0, -1, 630.998, 955.506)" id="use3257" x="0" y="0" width="744.09448" height="1052.3622" xlink:href="#g3246"/> | |
| <use transform="matrix(-0.881807, -0.471611, 0.471611, -0.881807, 360.298, 1044.22)" id="use3259" x="0" y="0" width="744.09448" height="1052.3622" xlink:href="#g3180"/> | |
| <use transform="matrix(0, -1, 1, 0, -164.928, 795.78)" id="use3261" x="0" y="0" width="744.09448" height="1052.3622" xlink:href="#g3246"/> | |
| <path d="M 249.97798,429.14448 L 237.92277,462.81802 L 521.90116,563.50788 L 545.4621,553.10466 L 532.12048,528.78469 L 249.97798,429.14448 z" id="rect3263" style="overflow: visible; marker: none; opacity: 1; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: evenodd; stroke: none; stroke-width: 0.5; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0pt; stroke-opacity: 1; visibility: visible; display: inline;"/> | |
| <path d="M 396.337,414.63424 L 409.05736,435.21453 L 25.745558,636.78236 L 7.3061092,629.27373 L 13.047192,609.70388 L 396.337,414.63424 z" id="path3268" style="overflow: visible; marker: none; opacity: 1; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: evenodd; stroke: none; stroke-width: 0.5; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0pt; stroke-opacity: 1; visibility: visible; display: inline;"/> | |
| <path id="seconds" d="M 413.18304,293.54853 L 369.33929,536.07978 C 368.35044,536.00945 367.37715,535.95478 366.37054,535.95478 C 343.31421,535.9548 324.5893,554.70501 324.58929,577.82978 C 324.58929,596.82172 337.21192,612.88587 354.49554,618.01728 L 335.90179,720.89228 L 337.80804,725.14228 L 341.33929,722.42353 L 362.37054,619.54853 C 363.6835,619.6735 365.02514,619.73603 366.37054,619.73603 C 389.42687,619.73605 408.12053,600.95452 408.12054,577.82978 C 408.12054,559.13521 395.8942,543.30932 379.02679,537.92353 L 428.40179,296.23603 L 413.18304,293.54853 z M 367.08929,558.86103 C 377.7788,558.86102 386.46429,567.51905 386.46429,578.17353 C 386.46428,588.82801 377.77881,597.45478 367.08929,597.45478 C 356.39976,597.45479 347.74554,588.82801 347.74554,578.17353 C 347.74553,567.51905 356.39977,558.86103 367.08929,558.86103 z" transform="translate(-85.7143, 78.0765)" id="path3274" style="overflow: visible; marker: none; fill: rgb(164, 0, 0); fill-opacity: 1; fill-rule: evenodd; stroke: none; stroke-width: 0.5; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0pt; stroke-opacity: 1; visibility: visible; display: inline;"/> | |
| </g> | |
| </svg> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment