D3.js - 縮放/變換多行

Question

我在努力解決這個問題，我試圖縮放我的圖表，特別是我動態繪製的線條。 這裏我的小提琴：https://jsfiddle.net/w3j89Lf3/

<link href="http://getbootstrap.com/examples/justified-nav/justified-nav.css" rel="stylesheet"> 
<style> 
    .axis path { 
     fill: none; 
     stroke: #777; 
     shape-rendering: crispEdges; 
    } 
    .axis text { 
     font-family: Lato; 
     font-size: 13px; 
    } 
    .legend { 
     font-size: 14px; 
     font-weight: bold; 
    } 
    .grid .tick { 
     stroke: lightgrey; 
     opacity: 0.7; 
    } 
    .grid path { 
      stroke-width: 0; 
    } 
</style> 

我的代碼與x和y軸效果很好，但對我行不行，你可以看到在我的功能「縮放」。

<div class="container"> 

    <div class="jumbotron"> 

     <svg id="visualisation" width="1000" height="500"></svg> 
     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
     <script> 
      function InitChart() { 
       var data = [{ 
           "Client": "ABC", 
           "sale": "202", 
           "year": "2000" 
          }, { 
           "Client": "ABC", 
           "sale": "215", 
           "year": "2002" 
          }, { 
           "Client": "ABC", 
           "sale": "179", 
           "year": "2004" 
          }, { 
           "Client": "ABC", 
           "sale": "199", 
           "year": "2006" 
          }, { 
           "Client": "ABC", 
           "sale": "134", 
           "year": "2008" 
          }, { 
           "Client": "ABC", 
           "sale": "176", 
           "year": "2010" 
          }, { 
           "Client": "XYZ", 
           "sale": "100", 
           "year": "2000" 
          }, { 
           "Client": "XYZ", 
           "sale": "215", 
           "year": "2002" 
          }, { 
           "Client": "XYZ", 
           "sale": "179", 
           "year": "2004" 
          }, { 
           "Client": "XYZ", 
           "sale": "199", 
           "year": "2006" 
          }, { 
           "Client": "XYZ", 
           "sale": "134", 
           "year": "2008" 
          }, { 
           "Client": "XYZ", 
           "sale": "176", 
           "year": "2013" 
          }]; 

       var dataGroup = d3.nest() 
        .key(function(d) { 
         return d.Client; 
        }) 
        .entries(data); 

       var vis = d3.select("#visualisation"), 
        WIDTH = 1000, 
        HEIGHT = 500, 
        MARGINS = { 
         top: 50, 
         right: 20, 
         bottom: 50, 
         left: 50 
        }; 

       //Aggiungi ASSI con scala 
        xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(data, function(d) { 
           return d.year; 
          }), d3.max(data, function(d) { 
           return d.year; 
          })]), 

        yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(data, function(d) { 
           return d.sale; 
          }), d3.max(data, function(d) { 
           return d.sale; 
          })]), 

        xAxis = d3.svg.axis() 
        .scale(xScale), 

        yAxis = d3.svg.axis() 
        .scale(yScale) 
        .orient("left"); 

       vis.append("svg:g") 
        .attr("class", "x axis") 
        .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") 
        .call(xAxis); 

       vis.append("svg:g") 
        .attr("class", "y axis") 
        .attr("transform", "translate(" + (MARGINS.left) + ",0)") 
        .call(yAxis); 

       //Aggiungi GRID 
       function make_x_axis() {   
        return d3.svg.axis() 
         .scale(xScale) 
         .orient("bottom") 
         .ticks(10) 
       } 

       function make_y_axis() {   
        return d3.svg.axis() 
         .scale(yScale) 
         .orient("left") 
         .ticks(10) 
       } 

       vis.append("svg:g")   
        .attr("class", "grid") 
        .attr("transform", "translate(0," + HEIGHT + ")") 
        .call(make_x_axis() 
         .tickSize(-HEIGHT, 0, 0) 
         .tickFormat("") 
        ) 
       vis.append("svg:g")   
        .attr("class", "grid") 
        .call(make_y_axis() 
         .tickSize(-WIDTH, 0, 0) 
         .tickFormat("") 
        ) 

       var lineGen = d3.svg.line() 
        .x(function(d) { 
         return xScale(d.year); 
        }) 
        .y(function(d) { 
         return yScale(d.sale); 
        }) 
        .interpolate("basis"); //linear 

       lSpace = WIDTH/dataGroup.length; 

       dataGroup.forEach(function(d, i) { 
        color = "hsl(" + Math.random() * 360 + ",100%,50%)"; 

        vis.append('svg:path') 
         .attr('d', lineGen(d.values)) 
         .attr('stroke', color) 
         .attr('stroke-width', 2) 
         .attr('id', 'line_'+d.key) 
         .attr('fill', 'none'); 
        vis.append("text") 
         .attr("x", (lSpace/2) + i * lSpace) 
         .attr("y", HEIGHT) 
         //.style("stroke", "black") 
         .style("fill", color) 
         .attr("class", "legend").on('click', function() { 
                var active = d.active ? false : true; 
                var opacity = active ? 0 : 1; 

                d3.select("#line_" + d.key).style("opacity", opacity); 

                d.active = active; 
               }) 
         .text(d.key); 
       }); 

       function zoomed() { 
        vis.select(".x.axis").call(xAxis); 
        vis.select(".y.axis").call(yAxis); 
        vis.selectAll('path.line').attr("d", function(d) {return line(d.values)}); **-> HERE I WOULD ZOOM/TRANSFORM** 
       } 

       var zoom = d3.behavior.zoom() 
        .x(xScale) 
        .y(yScale) 
        .scaleExtent([1, 10]) 
        .on("zoom", zoomed); 

       vis.call(zoom) 
      } 
      InitChart(); 
     </script> 
    </div> 

</div> 

Answer 1

有跡象表明，應改變，使其工作兩件事情。

首先在縮放功能中，由於路徑沒有線類，所以最終會出現空選擇。將線類添加到路徑，同時生成它們以使.selectAll('path.line')工作。

其次，您沒有將數據綁定到路徑，因此您稍後在縮放功能中不能使用它。如果你傳遞一個匿名函數作爲.attr的第二個參數，那麼這個函數的第一個參數（d，在你的情況下）將是綁定到選擇的數據。爲了使這條線的工作：

vis.selectAll('path.line').attr("d", function(d) {return line(d.values)});

你必須將數據添加到路徑。做到這一點的方法之一是這樣的：

vis.append('svg:path').datum(d) 

但是，將數據綁定，輸入比forEach循環使用新的元素更好的辦法。我建議this斯科特·默裏非常有用的教程，解釋d3數據綁定。

這是更新的jsfiddle。