Error using d3: "d3 is not defined"

Question

Error using d3: "d3 is not defined"

Navigation

#1 by (2 votes)

1

I am starting to do my pininos with d3 in Python (using Jupyter ), with something very simple, but no matter what I do, I have errors. Go the code:

from IPython.core.display import HTML, Javascript
import json

#Llamo a d3 desde el directorio donde trabajo (bajé el zip y lo instalé en una carpeta)

HTML('''<script src="d3/d3.min.js"></script>''')

Now comes what is supposed to be done: a sign that says "Hello D3!" in orange letters

HTML('''
<style scoped>
.bedazzled {
  color: orange;
}
</style>
<div id="d3-div-1"></div>
<script>

var size_data = [10,20,30];

d3.select("#d3-div-1").selectAll('.bedazzled')
    .data(size_data)
    .enter().append('p')
      .attr("class","bedazzled")
      .style("font-size", function(d){ return "" + d + "px";})
      .text("Hello D3!");

</script>
''')

The error I have is:

Javascript error adding output!
ReferenceError: d3 is not defined
See your browser Javascript console for more details.

I've tried incorporating <script src="d3/d3.min.js"></script> directly into the long code and into the first call to HTML (first block of code in this post), using <script src="https://d3js.org/d3.v5.min.js"></script> and even <script src="https://d3js.org/d3.v5.min"></script> with exactly the same result.

As you can imagine, I am somewhat frustrated with this matter, so any suggestion I will thank you infinitely.

javascript html python d3.js

asked by Alejandro Carrera 04.12.2018 в 01:45

source

1 answer

Best way to modify (update) an object with Spring and Hibernate in this scenario? Space between bootstrap buttons

score 2 · Accepted Answer

I found this answer in SO in English link

It seems that you have to import d3 globally using this code:

%%javascript
require.config({
    paths: {
        d3: "https://d3js.org/d3.v5.min"
     }
});

require(["d3"], function(d3) {
    window.d3 = d3;
});

I tried it and it works for me