0

Edited

I want to draw an SVG circle on my page with d3.js. I have constructed a skeleton custom module and I am returning the following render array from src/Controller/MyModuleController.php:

namespace Drupal\my_module\Controller;

class MyModuleController {
  public function myModule() {
    return array(
      '#markup' => '<div id="data-vis"></div>',
      '#attached' => array(
        'library' =>  array(
          'social_statistics/circle',
        ),
      ),
    );
  }
}

In my libraries.yml (located in the root of my module folder) I have:

circle:
  js:
    circle.js: {}
    dependencies:
      - social_statistics/d3

d3:
  remote: https://d3js.org
  version: 4.x
  license:
    name: BSD
    url: https://opensource.org/licenses/BSD-3-Clause
    gpl-compatible: true
  js:
    https://d3js.org/d3.v4.min.js: { type: external, minified: true }
    # d3.min.js: { minified: true }

In circle.js, (also located in the root of my module folder) I have:

d3.select("#data-vis")
  .append("svg")
  .append("circle")
  .attr("cx", 30)
  .attr("cy", 30)
  .attr("r", 20);

I'm getting the below error in the console, which suggests circle.js is being loaded, but not the d3 library dependency?

Uncaught ReferenceError: d3 is not defined

4
  • If you include the dependency in libraries.yml for circle.js, then you should not need to attach d3 in the render array.
    – mradcliffe
    Oct 28, 2016 at 14:53
  • You need to reference the library in the pattern module/library see drupal.stackexchange.com/a/167372/42650 and drupal.org/docs/8/creating-custom-modules/…
    – mradcliffe
    Oct 28, 2016 at 14:57
  • I've made some changes - see above - and circle.js is loading, but not the d3 library dependency - any ideas?
    – dbj44
    Nov 1, 2016 at 11:24
  • 1
    Answer: the issue is in libraries.yml - the indentation is wrong!
    – dbj44
    Nov 2, 2016 at 10:55

0

Browse other questions tagged or ask your own question.