correct way to load JS library for custom module

Question

I am trying to use d3.js in my module, but I am facing some issues.

I have the D3 module installed in sites/all/modules/d3/ and d3.min.js installed in sites/all/libraries/d3/, and I can see the d3/examples fine.

Now I have a js script in my custom module that is supposed to use D3, but I fail to load it. Here's my attempt to load the library:

drupal_add_library('d3','d3');
# retrieve some data as JSON
$setting = mymodule_load_data($param);
# create the render array
$content = array(
  '#attached' => array(
    # attach JS
    'js' => array(
      array(
        'type' => 'setting',
        'data' => array('mymodule' => array('json_data' => $setting)),
      ),
      array(
        'type' => 'file',
        'data' => drupal_get_path('module', 'mymodule') .'/js/myscript.js',
      ),
    ),
    'css' => array(
      drupal_get_path('module', 'mymodule') . '/css/mystyle.css',
    ),
  )
);
# return result
return $content;

but I don't see d3 included in the source code of my page and myscript.js of course doesn't work.

I have checked the return value of drupal_add_library as suggested in the comments and it's FALSE.

Any hints?

Answer 1

drupal_add_library() works only with libraries defined from hook_library() implementations. Since the d3.js module implements hooks used from the Libraries API module, you need to use the functions this module make available.

See Using Libraries API 2.x (as a module-developer) or Using Libraries API 1.x (as a module-developer), basing on which version of the Libraries API module you are using.

Normally, with the 2.x branch of the Libraries API module, you just call libraries_load('d3') which will call drupal_add_js(), or drupal_add_css(), or both, depending on what the library contains. Otherwise, if you need to check when a library has not been loaded, you use code similar to the following one.

if (($library = libraries_load($name)) && !empty($library['loaded'])) {
  // The library has been loaded.
}

Even better, using a render array, you just need to use code similar to the following one, which is for the case the library needs to be attached to a form element.

$form['myelement']['#attached']['libraries_load'][] = array('d3');

For an hook_page_build() implementation, adding the library at the page bottom requires code similar to the following one.

function mymodule_page_build(&$page) {
    $page['page_bottom']['d3_library']['#attached']['libraries_load'][] = array('d3');
  }
}