TransWikia.com

D3 is not rendering in CEWP (SP2013)

SharePoint Asked on February 24, 2021

I am trying to learn D3 for use with REST endpoints (eventually).

At the moment all I am trying to do is get D3 to render anything for learning purposes.

The code below shows the d3 object loaded when I view the console so I thought all was good but nothing is showing on the page at all. No box or bars but in the debugger I can see the new div elements added.

Code is loaded into a CEWP on a SharePoint 2013 page

HTML:

<script src="https://somesite/sp/tg/test/jslib/jquery351/jquery-3.5.1.min.js"></script> 

<script type="text/javascript" src="https://somesite/sp/tg/test/sandbox/SiteAssets/jslib/d3/d3.js"></script> 
<script type="text/javascript" src="https://somesite/sp/tg/test/sandbox/SiteAssets/jslib/d3test/d3test.js"></script>

<style>

    .container{
        width: 250px;
        height: 200px;
        display: flex;
        justify-content: space-around;
    }
    .bar{ background-color: #720570;}
</style>

<div></div>

JavaScript:

$(document).ready(function () {

    test();
});

function test()
{
    const DummyData=
    [
        {id:'d1', value:10,region:'USA'},
        {id:'d2', value:20,region:'China'},
        {id:'d3', value:30,region:'Russia'},
        {id:'d4', value:40,region:'Germany'}
    ];

     console.log(d3);
     console.log(DummyData);
    
    const container=d3.select('div')
        .classed('container',true)
        .style('border','10px solid red');

    const bars=container
    .selectAll('.bar')
    .data(DummyData)
    .enter()
    .append('div')
    .classed('bar',true)
    .style('width','50px')
    .style('height','150px');
 
}

2 Answers

@Denis Molodtsov is right, you need to add ID to your DIV tag to make it unique.

Below is my test result in SharePoint 2013:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> 

<script src="https://d3js.org/d3.v6.min.js"></script>

<style>

    .container{
        width: 250px;
        height: 200px;
        display: flex;
        justify-content: space-around;
    }
    .bar{ background-color: #720570;}
</style>

<div id="test"></div>

<script>
$(document).ready(function () {

    test();
});

function test()
{
    const DummyData=
    [
        {id:'d1', value:10,region:'USA'},
        {id:'d2', value:20,region:'China'},
        {id:'d3', value:30,region:'Russia'},
        {id:'d4', value:40,region:'Germany'}
    ];

     console.log(d3);
     console.log(DummyData);
    
    const container=d3.select('div#test')
        .classed('container',true)
        .style('border','10px solid red');

    const bars=container
    .selectAll('.bar')
    .data(DummyData)
    .enter()
    .append('div')
    .classed('bar',true)
    .style('width','50px')
    .style('height','150px');
 
}
</script>

enter image description here

Answered by Michael Han_MSFT on February 24, 2021

If all scripts were loaded correctly, then the issue is most likely with the selector.

The following CSS-selector will look for the very first DIV in your page:

d3.select('div')

This is definitely not what you need. To avoid selecting wrong divs, you need to add an ID to the DIV you target:

<div id="MyDiv"></div>

Then, modify the CSS-selector to target your DIV like so:

 const container=d3.select('div#MyDiv')
        .classed('container',true)
        .style('border','10px solid red');

There is one more potential problem with another CSS selector:

const bars=container.selectAll('.bar')

In the code above you are trying to select an elemnt with a bar class, but I don't see it anywhere in your code. I'm not an expert in D3, but maybe you need to create another HTML element with this class?

More info on d3.select()

The d3.select() method returns the first element in the HTML document based on specified css-elector.

Answered by Denis Molodtsov on February 24, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP