Why does not this chart d3.js work with require.js?

Question

I've made a pie-chart and trying to display it on a page using require.js but can't do it correctly. Firebug shows that there is svg on this page with certain size and the page is empty. I tried to implement other moodules - they work well.

File main.js:

require.config({
paths: {
    'd3': "http://d3js.org/d3.v3.min"
},
shim: {
    'd3': {exports:'d3'}
}
});

require([

  'd3',
  'pie-chart'

    ], function (d3, piechart) {
        d3.select("body").append("h1").text("Successfully loaded D3 version " + d3.version);
        d3.select("body").append("svg");
});

File pie-chart.js:

define('pie-chart', function () {

var width = 960,
    height = 500,
    radius = Math.min(width, height) / 2;

var legendRectSize = 18; 

var legendSpacing = 4; 

var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var percentageFormat = d3.format("%");

var arc = d3.svg.arc()
    .outerRadius(radius - 10)
    .innerRadius(0);

var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) {
        return d.values;
});

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

d3.json("staff.json", function(error, json_data) {

var data = d3.nest()
    .key(function(d) {
      return d.Position;
})
    .rollup(function(d) {
      return d.length;
}).entries(json_data);

data.forEach(function(d) {
d.percentage = d.values / json_data.length;
});

console.log(data)
console.log("data variable", data);
console.log("pie(data)", pie(data));

var g = svg.selectAll(".arc")
    .data(pie(data))
    .enter().append("g")
    .attr("class", "arc")
    .on('mouseover', function() {
        var current = this;  
        var others = svg.selectAll(".arc").filter(function(el) {
            return this != current
  });
  others.selectAll("path").style('opacity', 0.8);
})
    .on('mouseout', function() {
        var current = this;
        d3.select(this)
    .style('opacity', 1);
    var others = svg.selectAll(".arc").filter(function(el) {
    return this != current
  });
  others.selectAll("path").style('opacity', 1);
});


g.append("path")
    .attr("d", arc)
    .style("fill", function(d, i) {
        return color(d.data.key);
});

g.append("text")
    .attr("transform", function(d) {
        return "translate(" + arc.centroid(d) + ")";
})
    .attr("dy", ".35em")
    .style("text-anchor", "middle")
    .text(function(d) {
        console.log("d is", d);
        return percentageFormat(d.data.percentage);
});

var legend = d3.select("body").append("svg")
    .attr("class", "legend")

    .selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

legend.append("rect")
    .attr("width", 18)
    .attr("height", 18)
    .style("fill", function(d, i) {
return color(d.key);
});

legend.append("text")
    .attr("x", 24)
    .attr("y", 9)
    .attr("dy", ".35em")
    .text(function(d) { return d.key; });                   
});
});

File d3.js I wrapped this way:

define('d3', function () {
  // require.js code
});

Answer 1

d3 is not dependent on JQuery. I removed the jquery from your plunk, also you do not need the shim attribute. Your main.js should be something like this:

require.config({
    paths: {
        'd3': "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.min"
    }
});
require([
    'd3',
    'pie-chart'
    ], function ( d3, $, piechart) {

});

Here is the working plunk link: http://plnkr.co/edit/Le4tpejMvPxLA08isacW?p=preview