d3多線圖與變焦和更新

我想添加一個縮放到我的d3線圖，並得到了與域的問題。看起來第二行的域沒有更新，它只是使用第一行的域值，因此第二行不可見（csv中的值要大得多）。目標是無論數據如何出價，兩條線都適合畫布。所有的圖形都應該縮放到100％的畫布高度。d3多線圖與變焦和更新

請讓我知道，如果你有任何想法我必須改變。

<!doctype html> 
<html> 
    <head> 
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
    <script src="//d3js.org/d3.v3.min.js"></script> 
    </head> 
    <body> 
<style> 
rect.pane { 
    cursor: move; 
    fill: none; 
    pointer-events: all; 
} 
.axis path, 
.axis line { 
    fill: none; 
    stroke: grey; 
    stroke-width: 1; 
    shape-rendering: crispEdges; 
} 
.line { 
    fill: none; 
    stroke: #26b2d5; 
    stroke-width: 1.5px; 
} 
.line2 { 
    fill: none; 
    stroke: #bdc1cc; 
    stroke-width: 1.5px; 
} 
svg { 
    font: 10px sans-serif; 
    shape-rendering: crispEdges; 
} 
</style> 

     <!--NAVIGATION--> 
     <nav> 
     <div> 
      <ul> 
       <li><a href='#'>First</a> 
        <li><a href='#'><div> 
          <input type="button" 
            value="A" 
            onclick="updateFirst();updateA();" /> 
        </div></a></li> 
        <li><a href='#'><div> 
          <input type="button" 
            value="B" 
            onclick="updateFirst();updateB();" /> 
        </div></a></li> 
        </li>    

       <li><a href='#'>Second</a> 
        <li><a href='#'><div> 
          <input type="button" 
            value="A" 
            onclick="updateSecond();updateA();" /> 
        </div></a></li> 
        <li><a href='#'><div> 
          <input type="button" 
            value="B" 
            onclick="updateSecond();updateB();" /> 
        </div></a></li> 
       </li> 
      </ul> 
      </div> 
     </nav> 

     <!--MAIN--> 
     <main> 

     <script> 
     var margin = {top: 10, right: 20, bottom: 30, left: 50}, 
      width = 1000 - margin.left - margin.right, 
      height = 570 - margin.top - margin.bottom; 

     var parseDate = d3.time.format("%W-%Y").parse, 
      formatDate = d3.time.format("%Y"); 

     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") 
      .ticks(15) 
      .tickPadding(6); 
     var yAxis = d3.svg.axis() 
      .scale(y) 
      .orient("left") 
      .ticks(5) 
      .tickPadding(6); 

     var line = d3.svg.line() 
      .x(function(d) { return x(d.meldewoche); }) 
      .y(function(d) { return y(d.faelle); }); 
     var line2 = d3.svg.line() 
      .x(function(d) { return x(d.woche); }) 
      .y(function(d) { return y(d.anzahl); }); 

     var svg = d3.select("body").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 zoom = d3.behavior.zoom() 
      .on("zoom", draw); 

     svg.append("clipPath") 
      .attr("id", "clip") 
      .append("rect") 
      .attr("x", x(0)) 
      .attr("y", y(1)) 
      .attr("width", x(1) - x(0)) 
      .attr("height", y(0) - y(1)); 

     svg.append("g") 
       .attr("class", "x axis") 
       .attr("transform", "translate(0," + height + ")"); 
     svg.append("g") 
       .attr("class", "y axis"); 

     svg.append("path") 
      .attr("class", "line") 
      .attr("clip-path", "url(#clip)"); 

     svg.append("rect") 
      .attr("class", "pane") 
      .attr("width", width) 
      .attr("height", height) 
      .call(zoom); 


     d3.csv("data-a.csv", function(error, data) { 
       if (error) throw error; 

       data.forEach(function(d) { 
        var parseDate = d3.time.format("%m-%Y").parse 
        d.woche = parseDate(d.woche); 
        d.anzahl = +d.anzahl; 
      }); 
      x.domain([new Date(2001, 01), new Date(2015, 12)]); 
      y.domain([0, d3.max(data, function(d) { return d.anzahl; })]); 
      zoom.x(x); 

      svg.append("path") 
       .attr("class", "line2") 
       .attr("clip-path", "url(#clip)"); 

      svg.select("path.line2").data([data]); 

      function test() { 
       svg.select("g.x.axis").call(xAxis); 
       svg.select("g.y.axis").call(yAxis); 
       svg.select("path.line2").attr("d", line2); 
      } 
     }); 

     d3.csv("data-first.csv", function(error, data) { 
       if (error) throw error; 

       data.forEach(function(d) { 
        var parseDate = d3.time.format("%W-%Y").parse; 
        d.meldewoche = parseDate(d.meldewoche); 
        d.faelle = +d.faelle; 
      }); 
      x.domain([new Date(2001, 01), new Date(2016, 01)]); 
      y.domain([0, d3.max(data, function(d) { return d.faelle; })]); 
      zoom.x(x); 

      svg.select("path.line").data([data]); 
       draw(); 
     }); 

     function updateFirst() {    
     d3.csv("data-first.csv", function(error, data) { 
       if (error) throw error; 

       data.forEach(function(d) { 
        parseDate = d3.time.format("%W-%Y").parse 
        d.meldewoche = parseDate(d.meldewoche); 
        d.faelle = +d.faelle; 
      }); 
      x.domain([new Date(2001, 01), new Date(2016, 01)]); 
      y.domain([0, d3.max(data, function(d) { return d.faelle; })]); 
      zoom.x(x); 

      svg.selectAll("path.line").data([data]); 
      update(); 
     }); 
     } 

     function updateSecond() {    
     d3.csv("data-second.csv", function(error, data) { 
       if (error) throw error; 

       data.forEach(function(d) { 
        d.meldewoche = parseDate(d.meldewoche); 
        d.faelle = +d.faelle; 
      }); 
      x.domain([new Date(2001, 01), new Date(2015, 01)]); 
      y.domain([0, d3.max(data, function(d) { return d.faelle; })]); 
      zoom.x(x); 

      svg.selectAll("path.line").data([data]); 
      update(); 
     }); 
     } 

     function updateA() {    
     d3.csv("data-a.csv", function(error, data) { 
       if (error) throw error; 

       data.forEach(function(d) { 
       var parseDate = d3.time.format("%m-%Y").parse; 
        d.woche = parseDate(d.woche); 
        d.anzahl = +d.anzahl; 
      }); 

      x.domain([new Date(2001, 01), new Date(2015, 01)]); 
      y.domain([0, d3.max(data, function(d) { return d.anzahl; })]); 
      zoom.x(x); 

      svg.selectAll("path.line2").data([data]); 
      update(); 
     }); 
     } 

     function updateB() {    
     d3.csv("data-b.csv", function(error, data) { 
       if (error) throw error; 

       data.forEach(function(d) { 
       var parseDate = d3.time.format("%m-%Y").parse; 
        d.woche = parseDate(d.woche); 
        d.anzahl = +d.anzahl; 
      }); 

      x.domain([new Date(2001, 01), new Date(2015, 01)]); 
      y.domain([0, d3.max(data, function(d) { return d.anzahl+50; })]); 
      zoom.x(x); 

      svg.selectAll("path.line2").data([data]); 
      update(); 
     }); 
     } 

     function update() { 
      svg.select("g.x.axis").transition().duration(350).call(xAxis); 
      svg.select("g.y.axis").transition().duration(350).call(yAxis); 
      svg.selectAll("path.line").transition().duration(750).attr("d", line); 
      svg.selectAll("path.line2").transition().duration(750).attr("d", line2); 
     } 

     function draw() { 
      svg.select("g.x.axis").call(xAxis); 
      svg.select("g.y.axis").call(yAxis); 
      svg.select("path.line").attr("d", line); 
      svg.select("path.line2").attr("d", line2); 
     }  
    </script> 
    </main> 
    </body> 
</html>

來源

2016-01-14 Valentina

您還需要提供所有的CSV對我們的嘗試。 – Cyril

您的代碼僅爲加載的最後一個文件設置域。任何時候你修改域，看看當前的和最小/最大的。 – Mark

當您在更新函數中設置域時，只能查看當前文件。您應該將當前域與當前正在使用的域進行比較，然後查看是否需要設置新的最大值。

這裏是你擁有的一切：

y.domain([0, d3.max(data, function(d) { return d.anzahl+50; })]);

這裏有您需要什麼：

var newMax = d3.max(data, function(d) { return d.anzahl+50; }); 
var oldMax = y.domain()[1]; 

if (newMax > oldMax){ 
    y.domain([0, newMax]); 
}

來源

2016-01-14 18:26:29 Mark

非常感謝！這不完全是我想要的，我需要兩條不同的域，但我添加了第二個y變量，它的工作原理！ – Valentina

d3多線圖與變焦和更新

回答

相關問題