同一页上的2张完全不同的d3图表

Question

I'm trying to get 2 completely different d3 charts (2 line charts but totally different data - one with several lines and negative data, other with one line positive data) on the same page.

Right now, I only get the first one to be generated and shown correctly on the HTML page, the second chart doesn't show at all (not even svg container is generated).

Here is my code:

    (function() {
        // Get the data
        d3.json("../assets/js/json/temperature.json", function(data) {


            // Set the dimensions of the canvas / graph
            var margin = {top: 30, right: 20, bottom: 30, left: 25},
                width = 600 - margin.left - margin.right,
                height = 270 - margin.top - margin.bottom;

            // Parse the date / time
            var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;

            // Set the ranges
            var x = d3.time.scale().range([0, width]);
            var y = d3.scale.linear().range([height, 0]);

            // Define the axes
            var xAxis = d3.svg.axis().scale(x)
                .orient("bottom").ticks(5);

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

            // Define the line
            var valueline = d3.svg.line()
                .x(function(d) { return x(d.temps); })
                .y(function(d) { return y(d.temperature); });

            // prepare data
            data.forEach(function(d) {
                d.temps = parseDate(d.temps);
                d.temperature = +d.temperature;
            });

            // Adds the svg canvas
            var svg = d3.select("#graphTemp")
                .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 + ")");

                // Scale the range of the data on domain
                x.domain(d3.extent(data, function(d) { return d.temps; }));
                y.domain([0, d3.max(data, function(d) { return d.temperature; })]);

                // Add the valueline path.
                svg.append("path")  
                    .attr("class", "line")
                    .attr("d", valueline(data));

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

                // Add the Y Axis
                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("Temperatures");

        });
    })();

    (function(){

    // loads the data and loads it into chart - main function
    d3.json("../assets/js/json/maitrise.json", function(data) {

    var m = {top: 20, right: 5, bottom: 30, left: 40},
                w  = 70 - m.left - m.right,
                h = 30  - m.top  - m.bottom;


    var x = d3.scale.linear().domain([0, data.length]).range([0 + m.left, w - m.right]);

    var y = d3.scale.linear()
                .rangeRound([h, 0]);

    var line = d3.svg.line()
                .interpolate("cardinal")
                .x(function(d,i) { return x(i); })
                .y(function (d) { return y(d.value); });

    var color = d3.scale.ordinal()
                .range(["#28c6af","#ffd837","#e6443c","#9c8305","#d3c47c"]);

    var svg2 = d3.select("#maitrisee").append("svg")
                .attr("width",  w  + m.left + m.right)
                .attr("height", h + m.top  + m.bottom)
              .append("g")
                .attr("transform", "translate(" + m.left + "," + m.top + ")");

    // prep axis variables
    var xAxis2 = d3.svg.axis()
        .scale(x)
        .orient("bottom");

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


        //console.log("Inital Data", data);

      var labelVar = 'id'; //A
      var varNames = d3.keys(data[0])
          .filter(function (key) { return key !== labelVar;}); //B

      color.domain(varNames); //C

      var seriesData = varNames.map(function (name) { //D
        return {
          name: name,
          values: data.map(function (d) {
            return {name: name, label: d[labelVar], value: +d[name]};
          })
        };
      });
      console.log("seriesData", seriesData);

      y.domain([
        d3.min(seriesData, function (c) { 
          return d3.min(c.values, function (d) { return d.value; });
        }),
        d3.max(seriesData, function (c) { 
          return d3.max(c.values, function (d) { return d.value; });
        })
      ]);

    var series = svg2.selectAll(".series")
        .data(seriesData)
      .enter().append("g")
        .attr("class", function (d) { return d.name; });

    series.append("path")
      .attr("class", "line")
      .attr("d", function (d) { return line(d.values); })
      .style("stroke", function (d) { return color(d.name); })
      .style("stroke-width", "2px")
      .style("fill", "none");

    });

    })();

Answer 1

OK, I found where the error was coming from. There was a piece of javascript in the middle of the HTML page that stopped d3 to generate the second graph further down in the page.

Thanks for all the help!