Fix graph rendering in d3v4.

Note, there are still some bugs with layout/rendering (e.g. try to open/close a node group and things get weird.)

PiperOrigin-RevId: 156122210

2 files changed, 17 insertions, 23 deletions

diff --git a/tensorflow/tensorboard/components/tf_graph_common_d3v4/annotation.ts b/tensorflow/tensorboard/components/tf_graph_common_d3v4/annotation.ts
index 6db0cd5519..bde3829778 100644
--- a/tensorflow/tensorboard/components/tf_graph_common_d3v4/annotation.ts
+++ b/tensorflow/tensorboard/components/tf_graph_common_d3v4/annotation.ts
@@ -75,9 +75,7 @@ module tf.graph.scene.annotation {
             addAnnotationLabel(
                 aGroup, a.node.name, a, Class.Annotation.ELLIPSIS);
           }
-        });
-
-    annotationGroups
+        }).merge(annotationGroups)
         .attr(
             'class',
             a => {
@@ -202,20 +200,18 @@ function update(aGroup, d: render.RenderNodeInfo, a: render.Annotation,
   }
 
   // label position
-  aGroup.select('text.' + Class.Annotation.LABEL).transition().attr({
-    x: cx + a.dx + (a.isIn ? -1 : 1) * (a.width / 2 + a.labelOffset),
-    y: d.y + a.dy
-  });
+  aGroup.select('text.' + Class.Annotation.LABEL).transition()
+    .attr('x', cx + a.dx + (a.isIn ? -1 : 1) * (a.width / 2 + a.labelOffset))
+    .attr('y', d.y + a.dy);
 
   // Some annotations (such as summary) are represented using a 12x12 image tag.
   // Purposely omitted units (e.g. pixels) since the images are vector graphics.
   // If there is an image, we adjust the location of the image to be vertically
   // centered with the node and horizontally centered between the arrow and the
   // text label.
-  aGroup.select('use.summary').transition().attr({
-    x: cx + a.dx - 3,
-    y: d.y + a.dy - 6
-  });
+  aGroup.select('use.summary').transition()
+    .attr('x', cx + a.dx - 3)
+    .attr('y', d.y + a.dy - 6);
 
   // Node position (only one of the shape selection will be non-empty.)
   positionEllipse(
diff --git a/tensorflow/tensorboard/components/tf_graph_common_d3v4/scene.ts b/tensorflow/tensorboard/components/tf_graph_common_d3v4/scene.ts
index 06f03e910a..023bc161f5 100644
--- a/tensorflow/tensorboard/components/tf_graph_common_d3v4/scene.ts
+++ b/tensorflow/tensorboard/components/tf_graph_common_d3v4/scene.ts
@@ -453,12 +453,11 @@ export function translate(selection, x0: number, y0: number) {
  */
 export function positionRect(rect, cx: number, cy: number, width: number,
     height: number) {
-  rect.transition().attr({
-    x: cx - width / 2,
-    y: cy - height / 2,
-    width: width,
-    height: height
-  });
+  rect.transition()
+    .attr('x', cx - width / 2)
+    .attr('y', cy - height / 2)
+    .attr('width', width)
+    .attr('height', height);
 };
 
 /**
@@ -499,12 +498,11 @@ export function positionButton(button, renderNode: render.RenderNodeInfo) {
  */
 export function positionEllipse(ellipse, cx: number, cy: number,
     width: number, height: number) {
-  ellipse.transition().attr({
-    cx: cx,
-    cy: cy,
-    rx: width / 2,
-    ry: height / 2
-  });
+  ellipse.transition()
+    .attr('cx', cx)
+    .attr('cy', cy)
+    .attr('rx', width / 2)
+    .attr('ry', height / 2);
 };
 
 /**