여러 개의 D3 그래프를 추가하려고 시도합니다.

Question

저는 웹 사이트에 두 개 이상의 그래프를 포함시키는 방법을 알아 내려고하고 있습니다. 현재 Area Graph과 Pie Graph을 사용 중입니다. 그 중 하나를 사용하지 않으면 다른 하나는 정상적으로 작동하지만 동시에 두 가지를 모두 사용하려고하면 작동이 멈 춥니 다. 그들은이 때문에 I 생각 파이 그래프

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

대 면적 그래프

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 코드

JS 코드는 문제가 변수의 범위 (특히 SVG 변수로 놓여 같은 이름). 지금은 별도의 JS 파일에 이러한 코드 세트가 있고 HTML 파일의 body 태그 맨 아래에 링크를 연결합니다.

이러한 변수의 범위를 파일로 어떻게 제한합니까? 그게 문제 야? 감사합니다

Answer 1

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