Tentativo di aggiungere più grafici D3

Question

Sto cercando di capire come includere 2 o più grafici sul mio sito web. Attualmente sto usando lo Area Graph e lo Pie Graph. Se disabilito uno di questi, l'altro funziona bene, ma quando provo ad usarli entrambi allo stesso tempo, smette di funzionare.

codice JS per l'area del grafico

var margin = { top: 0, right: 0, bottom: 30, left: 50 }, 
width = 670 - margin.left - margin.right, 
height = 326 - margin.top - margin.bottom; 

var parseDate = d3.time.format("%d-%b-%y").parse; 

var x = d3.time.scale() 
.range([0, width]); 

var y = d3.scale.linear() 
.range([height, 0]); 

var xAxis = d3.svg.axis() 
.scale(x) 
.orient("bottom"); 

var yAxis = d3.svg.axis() 
.scale(y) 
.orient("left"); 

var svg = d3.select("#watLenYearGra").append("svg") 
.attr("width", width + margin.left + margin.right) 
.attr("height", height + margin.top + margin.bottom) 
.append("g") 
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

var area = d3.svg.area() 
.x(function (d) { return x(d.date); }) 
.y0(height) 
.y1(function (d) { return y(d.close); }); 

$("#watLenYear").click(function() { 
    $("#watLenYearGra").slideToggle("fast"); 
}); 

d3.csv("data.csv", function (error, data) { 
    data.forEach(function (d) { 
     d.date = parseDate(d.date); 
     d.close = +d.close; 
    }); 

    x.domain(d3.extent(data, function (d) { return d.date; })); 
    y.domain([0, d3.max(data, function (d) { return d.close; })]); 

    svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis); 

    svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis) 
    .append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 6) 
    .attr("dy", ".71em") 
    .style("text-anchor", "end") 
    .text("Price ($)"); 

    svg.append("path") 
    .datum(data) 
    .attr("class", "area") 
    .attr("d", area); 
}); 

codice JS per la torta grafico

var width = 670, 
    height = 326, 
    radius = Math.min(width, height)/2; 

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

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

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

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

$("#watLenSz").click(function() { 
    $("#watLenSzGra").slideToggle("fast"); 
}); 

d3.csv("data1.csv", function (error, data) { 
    data.forEach(function (d) { 
     d.population = +d.population; 
    }); 

    var g = svg.selectAll(".arc") 
     .data(pie(data)) 
    .enter().append("g") 
     .attr("class", "arc"); 

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

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

Credo che il problema è la portata delle variabili (in particolare la variabile svg poiché hanno la stesso nome). In questo momento ho questi insiemi di codice in file JS separati e li collego nella parte inferiore del mio tag body nel file HTML.

Come limitare l'ambito di queste variabili ai relativi file? È questo anche il problema? Grazie

Answer 1

Dovrebbe funzionare se si utilizza closures:

(function() { 
    var margin = { top: 0, right: 0, bottom: 30, left: 50 }, 
    width = 670 - margin.left - margin.right, 
    height = 326 - margin.top - margin.bottom; 

    var parseDate = d3.time.format("%d-%b-%y").parse; 

    var x = d3.time.scale() 
    .range([0, width]); 

    var y = d3.scale.linear() 
    .range([height, 0]); 

    var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom"); 

    var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left"); 

    var svg = d3.select("#watLenYearGra").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    var area = d3.svg.area() 
    .x(function (d) { return x(d.date); }) 
    .y0(height) 
    .y1(function (d) { return y(d.close); }); 

    $("#watLenYear").click(function() { 
     $("#watLenYearGra").slideToggle("fast"); 
    }); 

    d3.csv("data.csv", function (error, data) { 
     data.forEach(function (d) { 
      d.date = parseDate(d.date); 
      d.close = +d.close; 
     }); 

     x.domain(d3.extent(data, function (d) { return d.date; })); 
     y.domain([0, d3.max(data, function (d) { return d.close; })]); 

     svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

     svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
     .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("Price ($)"); 

     svg.append("path") 
     .datum(data) 
     .attr("class", "area") 
     .attr("d", area); 
    }); 
})(); 

(function() { 
    var width = 670, 
     height = 326, 
     radius = Math.min(width, height)/2; 

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

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

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

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

    $("#watLenSz").click(function() { 
     $("#watLenSzGra").slideToggle("fast"); 
    }); 

    d3.csv("data1.csv", function (error, data) { 
     data.forEach(function (d) { 
      d.population = +d.population; 
     }); 

     var g = svg.selectAll(".arc") 
      .data(pie(data)) 
     .enter().append("g") 
      .attr("class", "arc"); 

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

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