No DIVs created by D3 on enter() data with multiple values

Question

Please note that it's not a question on how to get a bar. I've got that covered, luckily. It's more of a why not issue. When the reality doesn't meet the expectation, there's usually a lesson to be learned. Also, based on the awesomely helpful comments, I realized that the diagnostics were incorrect so I updated the question.

I've just started experimenting with D3. Following the examples, I get some nice graphs. Then, I tested this (just to accumulate knowledge on less usual approach with purely academic purpose).

var graphs = d3.select("#graph").selectAll("div");
graphs.data([1, 2, 3, 4]).enter()
  .append("div").text(function(d){ return d; });

The number of DIVs doesn't change. That confuses me, because I'd expect an increment by 4 (if I'm creating a DIV for each such element). When I fiddle the code, it works. However, I'm stuck on how to trouble-shoot it.

• I checked that d3.select("#graph") does contain precisely one element.
• I've run the script from the console to avoid load order issues.

My page is a partial view rendered by Razor. All other scripts, except jQuery, which I'need to keep as it's called on page load, are removed.

...
<div id="#graph" ...></div>
...
@section style{ @Styles.Render("~/Page.css") }
@section script{
  @Scripts.Render("~/Page.js")
  @Scripts.Render("~/Scripts/d3.min.js")
}

Answer 1

I see three things in your code. First of all, using the selector d3.("#graph") refers to <div id="graph" /> . You've got a sharp sign in the id of the HTML . That's why you don't see the number of elements increase - they're created into a different component. Use this, instead.

<div id="graph" ...>

An additional point's the order of your scripts. You markup is wrong because you read in Page.js before d3.min.js . If you're not getting errors because of lacking d3 in the onload of your page (which I'm assuming is in the first one), then you've got multiple references to it. This one is unneeded because you've got a global one covering it. Or you can switch the order of scripts like this and skip the global one.

@section script{
  @Scripts.Render("~/Scripts/d3.min.js")
  @Scripts.Render("~/Page.js")
}

Last point's about your sections. I'm assuming they're called from the layout and that this is only a partial view. If so, keep an eye on the order of rendering. Invoking the rendering of sections in partial views at different stages of the layout can create issues.