Birden çok D3 grafiği eklemeye çalışıyorum

Question

Web siteme nasıl 2 veya daha fazla grafik ekleyeceğimi anlamaya çalışıyorum. Şu anda Area Graph ve Pie Graph kullanıyorum. Onlardan birini devre dışı bırakırsam, diğeri iyi çalışır, ancak her ikisini de aynı anda kullanmaya çalıştığımda, çalışmayı durdurur. sahip oldukları beri Bence Pie Grafik

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; }); 
}); 

için Alan Grafik

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); 
}); 

JS kodu için

JS kodunun sorun değişkenlerin kapsam (özellikle svg değişkenle yatıyor aynı isim). Şu anda ayrı JS dosyalarında bu kod kümeleri var ve bunları, HTML dosyasındaki beden etiketimin altında birleştiriyorum.

Bu değişkenlerin kapsamını dosyalarıyla nasıl sınırlayabilirim? Sorun bu mu? Teşekkür

Answer 1

Eğer closures kullanmak eğer çalışması gerekir:

(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; }); 
    }); 
})();