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

それを動作させるために変更しなければならない2つのものがあります。

最初にズーム機能では、パスに線種がないため空の選択に終わります。ラインクラスを生成しながらパスに追加して、.selectAll('path.line')を動作させます。

第2に、データをパスにバインドしていないため、後でズーム機能で使用することはできません。匿名関数を.attrの第2引数として渡すと、この関数の最初の引数（あなたの場合はd）が選択にバインドされたデータになります。

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

あなたがパスにデータを追加する必要があります。このライン作業を行います。それを行うための1つの方法は、このようなものです：

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

しかし、データをバインドし、使用forEachループよりも新しい要素を入力するためのより良い方法があります。 this Scott Murrayの非常に参考になるチュートリアルがd3データの結合について説明しています。

更新日はjsfiddleです。