D3.js從單獨的文件繪製多個數據集

Question

我試圖用兩組tsv文件中的兩組數據來繪製散點圖。但是，每個人都以單一比例共享x軸。有兩個y軸，每個都有自己的比例。 我現在擁有的圖形將幫助直觀。

問題是，第二個數據集（橙色）只能在a軸上顯示爲大約15,000處的污跡。它應該是一個更大的線。另外，當我運行這個，有時第二個數據集呈現，現在第一個。不知道爲什麼會這樣..

這裏有兩個（可能）相關的代碼塊：

//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"); 

    }); 

和

//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

的問題是，您使用的相同的選擇，svg.selectAll(".dot")，對於每個數據集.data(tsv1)和.data(tsv2)。

D3認爲第二套應該取代第一套。您可以通過爲每種類型的點分配一個唯一的類來修復它。

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") 
     ...