Uploaded image for project: 'Zeppelin'
  1. Zeppelin
  2. ZEPPELIN-3495

D3 In Notebooks Causes Other Notebooks To Lose Their Output Graphics

    XMLWordPrintableJSON

    Details

    • Type: Bug
    • Status: Open
    • Priority: Major
    • Resolution: Unresolved
    • Affects Version/s: 0.7.3
    • Fix Version/s: None
    • Component/s: GUI
    • Labels:
      None

      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>

        Attachments

        1. Empty-Outputs.png
          157 kB
          Albert Chan

          Activity

            People

            • Assignee:
              Unassigned
              Reporter:
              achan Albert Chan
            • Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated: