Cố gắng thêm nhiều đồ thị D3

Question

Tôi đang cố gắng tìm hiểu cách bao gồm 2 hoặc nhiều đồ thị trên trang web của mình. Tôi hiện đang sử dụng Area Graph và Pie Graph. Nếu tôi vô hiệu hóa một trong số họ, sau đó khác hoạt động tốt, nhưng khi tôi cố gắng sử dụng cả hai cùng một lúc, nó ngừng hoạt động.

mã JS cho Khu vực Graph

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

mã JS cho Pie Graph

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

Tôi nghĩ vấn đề nằm với phạm vi của các biến (đặc biệt là biến svg kể từ khi họ có cùng tên). Ngay bây giờ tôi có các bộ mã này trong các tệp JS riêng biệt và tôi liên kết chúng ở cuối thẻ body của tôi trong tệp HTML.

Làm cách nào để giới hạn phạm vi của các biến này thành tệp của họ? Đó có phải là vấn đề không? Cảm ơn

Answer 1

Nó sẽ làm việc nếu bạn sử dụng 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; }); 
    }); 
})();