[ZEPPELIN-3495] D3 In Notebooks Causes Other Notebooks To Lose Their Output Graphics

• Type: Bug
• Status: Open
• Priority: Major
• Resolution: Unresolved
• Affects Version/s: 0.7.3
• Component/s: GUI
• Assignee: Unassigned
• Reporter: Albert Chan
• Created: 23/May/18 22:23
• Updated: 25/May/18 18:15

Description

When I run an %angular paragraph with d3, it causes other notebook books to lose their Output Graphics.  For example the Zeppelin Tutorial/Basic Features (Spark) notebooks now has an empty bar chart.  See the attached print screen.  The code is for a d3 scroll bar and is below.  I run it and it messes up all other notebooks:

%angular
<meta charset="utf-8">
<style>

.ticks

{ font: 10px sans-serif; }

.track,
.track-inset,
.track-overlay

{ stroke-linecap: round; }

.track

{ stroke: #000; stroke-opacity: 0.3; stroke-width: 10px; }

.track-inset

{ stroke: #ddd; stroke-width: 8px; }

.track-overlay

{ pointer-events: stroke; stroke-width: 50px; cursor: crosshair; }

.handle

{ fill: #fff; stroke: #000; stroke-opacity: 0.5; stroke-width: 1.25px; }

</style>
<div>
<svg width="960" height="500"></svg>
<div/>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
function useD3()

{ var svg = d3.select("svg"), margin =

{right: 50, left: 50}

,
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height");

var hueActual = 0,
hueTarget = 70,
hueAlpha = 0.2,
hueTimer = d3.timer(hueTween);

var xSlider = d3.scaleLinear()
.domain([0, 180])
.range([0, width])
.clamp(true);

var slider = svg.append("g")
.attr("class", "slider")
.attr("transform", "translate(" + margin.left + "," + height / 2 + ")");

slider.append("line")
.attr("class", "track")
.attr("x1", xSlider.range()[0])
.attr("x2", xSlider.range()[1])
.select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
.attr("class", "track-inset")
.select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
.attr("class", "track-overlay")
.call(d3.drag()
.on("start.interrupt", function() { slider.interrupt(); })
.on("start drag", function() { hue(xSlider.invert(d3.event.x)); }));

slider.insert("g", ".track-overlay")
.attr("class", "ticks")
.attr("transform", "translate(0," + 18 + ")")
.selectAll("text")
.data(xSlider.ticks(10))
.enter().append("text")
.attr("x", xSlider)
.attr("text-anchor", "middle")
.text(function(d) { return d + "°"; });

var handle = slider.insert("circle", ".track-overlay")
.attr("class", "handle")
.attr("r", 9);

function hue(h)

{ hueTarget = h; hueTimer.restart(hueTween); }

function hueTween()

{ var hueError = hueTarget - hueActual; if (Math.abs(hueError) < 1e-3) hueActual = hueTarget, hueTimer.stop(); else hueActual += hueError * hueAlpha; handle.attr("cx", xSlider(hueActual)); svg.style("background-color", d3.hsl(hueActual, 0.8, 0.8)); }

}

if (window.d3)

{ useD3(); }

else

{ var sc = document.createElement('script'); sc.type = 'text/javascript'; sc.src = 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js'; sc.onload = useD3; sc.onerror = function(err)

{ alert(err); }

document.getElementsByTagName('head')[0].appendChild(sc);
}
</script>