D3.js Wykreślanie wielu zestawów danych z oddzielnych plików

Question

Próbuję utworzyć wykres rozproszenia z dwoma zestawami danych z dwóch plików tsv. Jednak każdy dzieli oś X na jedną skalę. Istnieją dwie osie y każda z własną skalą. Wykres, który mam teraz, pomoże wizualnie.

Problem polega na tym, że drugi zestaw danych (w kolorze pomarańczowym) kreśli tylko częściowo jako smużenie na wysokości około 15 000 na osi. to naprawdę powinna być znacznie większa linia. Ponadto, gdy uruchomię to, czasami drugi zestaw danych renderuje i pierwszy robi teraz. Nie wiem, dlaczego tak się dzieje ..

Oto dwie (prawdopodobnie) odpowiednie bloki kodu:

//1st data set 
    d3.tsv("datatest4.tsv", function(error, tsv1) { 

     tsv1.forEach(function(d) { 
      d.altit = +d.altit; 
      d.tmp = +d.tmp; 

     }); 

     x.domain(d3.extent(tsv1, function(d) { return d.altit; })).nice(); 
     y.domain(d3.extent(tsv1, function(d) { return d.tmp; })).nice(); 

     svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis) 
      .append("text") 
      .attr("class", "label") 
      .attr("x", width) 
      .attr("y", -6) 
      .style("text-anchor", "end") 
      .text("Altitude (m)"); 

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

     svg.selectAll(".dot") 
      .data(tsv1) 
      .enter().append("circle") 
      .attr("class", "dot") 
      .attr("r", 1) 
      .attr("cx", function(d) { return x(d.altit); }) 
      .attr("cy", function(d) { return y(d.tmp); }) 
      .style("fill","steelblue"); 

    }); 

i

//2nd data set 
    d3.tsv("datatest2.tsv", function(error, tsv2) { 

     tsv2.forEach(function(dd) { 
      dd.alti = +dd.alti; 
      dd.pressure = +dd.pressure; 
     }); 

     x2.domain(d3.extent(tsv2, function(dd) { return dd.alti; })).nice(); 
     y2.domain(d3.extent(tsv2, function(dd) { return dd.pressure; })).nice(); 

     svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis2) 
      .attr("x", width) 
      .attr("y", -6) 
      .text("Altitude (m)"); 

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

     svg.selectAll(".dot") 
      .data(tsv2) 
      .enter().append("circle") 
      .attr("class", "dot") 
      .attr("r", 1) 
      .attr("cx", function(dd) { return x2(dd.alti); }) 
      .attr("cy", function(dd) { return y2(dd.pressure); }) 
      .style("fill","orange");  

    }); 

Answer 1

Problemem jest to, że używasz tego samego selektora , svg.selectAll(".dot"), dla każdego zestawu danych .data(tsv1) i .data(tsv2).

D3 uważa, że ​​drugi zestaw ma zastąpić pierwszy. Możesz to naprawić, przypisując unikalną klasę do każdego typu kropki.

svg.selectAll(".blue.dot")// Select specifically blue dots 
     .data(tsv1) 
     .enter().append("circle") 
     .attr("class", "blue dot")// Assign two classes 
     ... 

    svg.selectAll(".orange.dot") 
     .data(tsv2) 
     .enter().append("circle") 
     .attr("class", "orange dot") 
     ...