2

I've added a new page to a sub-site.

Added a content editor web-part.

Then added the following D3 javascipt hello world script:

<!DOCTYPE html>
<html>
  <head>
    <meta name="description" content="D3byEX 1.1"> 
  </head>
  <body>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>
      d3.select('body')
        .append('h1')
        .text('Hello World!');
    </script>
  </body>
</html>

I also tried this:

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
  d3.select('body')
    .append('h1')
    .text('Hello World!');
</script>

The page is blank - why is this and what do I need to do to get Hello World?

progress so far

From here I've downloaded the zip "d3.zip": https://d3js.org/
Then I've unzipped the contents into a vanilla document library here:

http://SPaddress/testingSubSite/D3docLib/

Now I've amended the code in the content editor, and tried each of the following -they all produce a blank page:

<script src="http://SPaddress/testingSubSite/D3docLib/d3.min.js" charset="utf-8"></script>
<script>
     d3.select('body')
       .append('h1')
       .text('Hello World!');
</script>


<script src="http://SPaddress/testingSubSite/D3docLib/d3.v3.min.js" charset="utf-8"></script>
<script>
     d3.select('body')
       .append('h1')
       .text('Hello World!');
</script>


<script src="http://SPaddress/testingSubSite/D3docLib/d3.v4.min.js" charset="utf-8"></script>
<script>
     d3.select('body')
       .append('h1')
       .text('Hello World!');
</script>
Improve this question
8
  • you can ignore html, head and body tags. Run your code after document ready.
    – Atish Kumar Dipongkor
    Commented Oct 3, 2016 at 12:06
  • @AtishDipongkor so just the bit in between the <script> tags?
    – whytheq
    Commented Oct 3, 2016 at 12:10
  • yes I mean it. see my answer.
    – Atish Kumar Dipongkor
    Commented Oct 3, 2016 at 12:15
  • Use https instead of http. You need https if you want to use cdn
    – Atish Kumar Dipongkor
    Commented Oct 3, 2016 at 12:22
  • @AtishDipongkor our sharepoint is on prem - so I don't think cdn is relevent.
    – whytheq
    Commented Oct 3, 2016 at 12:25

2 Answers 2

Reset to default
5

There is no problem in loading script file(d3.v3.min.js). Everything is correct but the problem here is selecting 'body' will take the 'body' tag of the page, not the content editor web part tags.

'span' appended inside 'body' tag

Replace the script:

<script>
d3.select(".ms-WPBody div.ms-rtestate-field").append("span")
    .text("Hello, world!");
</script>
Improve this answer
3
  • did you load d3.v3.min.js into a doc library or just leave as a url to the D3 website reference? Did you test via an on premises version of sharepoint? Can you please add the section of the script which references d3.v3.min.js ... obviously you need to anonymise but just to give me an idea of the exact form used for src="http://SPaddress/testingSubSite/D3docLib/d3.v4.min.js"
    – whytheq
    Commented Oct 4, 2016 at 11:35
  • I just left the URL as the d3 website reference and I have tested in on premise version of sharepoint. (<script src="d3js.org/d3.v3.min.js" charset="utf-8"></script>)
    – Kumaraguru
    Commented Oct 4, 2016 at 12:10
  • this information is what has made the difference - ".ms-WPBody div.ms-rtestate-field". THANK YOU!
    – whytheq
    Commented Oct 4, 2016 at 14:22
1

Problem is in the src="http://d3js.org/d3.v3.min.js". It will be https instead of http.

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
    (function() {
        d3.select('body')
            .append('h1')
            .text('Hello World!');
    })();
</script>

You can ignore html, head and body tags in CEWP. See demo here.

If your SharePoint site is in http, https cdn link won't work. In that case, download d3.js and upload it into a SharePoint libray and then give the script reference from SharePoint library.

<script src="{path of your SharePoint library}/d3.v3.min.js" charset="utf-8"></script>
<script>
    (function() {
        d3.select('body')
            .append('h1')
            .text('Hello World!');
    })();
</script>
Improve this answer
3
  • I am in Edit Page ... in the Page Content there is a Script Editor > I have copied in your script > then check it back in BUT still an empty page!
    – whytheq
    Commented Oct 3, 2016 at 12:22
  • Can you show me the errors from console?
    – Atish Kumar Dipongkor
    Commented Oct 3, 2016 at 12:23
  • Hi Atish - I've amended the question with what I've now tried
    – whytheq
    Commented Oct 3, 2016 at 13:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.