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