D3 Examples - affixing an element to a transitioning path in d3

affixing an element to a transitioning path in d3

Using attrtween to affix an svg element to an svg path undergoing transition.

In order to compute its position, 1/3 of the way along the path, the element binds the path as data. (See var linkLabel, toward the end of the javascript file.) Then it uses attrTween (not attr) to fetch the correct position at each animation frame during the transition.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Test Path Label Transition</title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="test_path_transition.js"></script>
      <style>
.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}
.node {
  font: 12px sans-serif;
}
.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}
.diamond {
  fill: steelblue;
}
    </style>
  </head>
  <body>
    <script>
      test_path_transition();
    </script>
  </body>
</html>
​
​
    