2016-10-10 4 views
0

私は複数折れ線グラフを作成し、ボタンクリック時にデータを更新しようとしています。それぞれの線で、私は交尾点をハイライトしたいと思います。ボタンをクリックすると、行のパスを更新することができましたが、古い強調表示された交差点はsvgContainerから削除されません(eaxmpleはupdate2をクリックし、次にupdate1は行に接続されていない最後の円を削除しません)。ここでd3の折れ線グラフから古い点を削除します

<input type="button" onclick="update1()" value="Update" /> 
    <input type="button" onclick="update2()" value="UpdateDimension_T" /> 
    <div id="outputViz"> 

    </div> 


<script type="text/javascript">  
var data = [ 
    [{'index':1,'score':0},{'index':2,'score':5},{'index':3,'score':10},{'index':4,'score':0},{'index':5,'score':6}], 
    [{'index':1,'score':1},{'index':2,'score':6},{'index':3,'score':11},{'index':4,'score':1},{'index':5,'score':7}], 
    [{'index':1,'score':2},{'index':2,'score':7},{'index':3,'score':12},{'index':4,'score':2},{'index':5,'score':8}], 
    [{'index':1,'score':3},{'index':2,'score':8},{'index':3,'score':13},{'index':4,'score':3},{'index':5,'score':9}], 
    [{'index':1,'score':4},{'index':2,'score':9},{'index':3,'score':14},{'index':4,'score':4},{'index':5,'score':10}] 
    ]; 

    var data_O = [ 
    [{'index':1,'score':1},{'index':2,'score':6},{'index':3,'score':11},{'index':4,'score':1},{'index':5,'score':7},{'index':6,'score':12}], 
    [{'index':1,'score':2},{'index':2,'score':7},{'index':3,'score':12},{'index':4,'score':2},{'index':5,'score':8},{'index':6,'score':13}], 
    [{'index':1,'score':3},{'index':2,'score':8},{'index':3,'score':13},{'index':4,'score':3},{'index':5,'score':9},{'index':6,'score':14}], 
    [{'index':1,'score':4},{'index':2,'score':9},{'index':3,'score':14},{'index':4,'score':4},{'index':5,'score':10},{'index':6,'score':15}], 
    [{'index':1,'score':5},{'index':2,'score':10},{'index':3,'score':15},{'index':4,'score':5},{'index':5,'score':11},{'index':6,'score':16}] 
    ]; 

    var data_T = [ 
    [{'index':1,'score':5},{'index':2,'score':10},{'index':3,'score':15},{'index':4,'score':5},{'index':5,'score':12},{'index':6,'score':20},{'index':7,'score':15}], 
    [{'index':1,'score':6},{'index':2,'score':11},{'index':3,'score':16},{'index':4,'score':6},{'index':5,'score':13},{'index':6,'score':21},{'index':7,'score':16}], 
    [{'index':1,'score':7},{'index':2,'score':12},{'index':3,'score':17},{'index':4,'score':7},{'index':5,'score':14},{'index':6,'score':22},{'index':7,'score':17}], 
    [{'index':1,'score':8},{'index':2,'score':13},{'index':3,'score':18},{'index':4,'score':8},{'index':5,'score':15},{'index':6,'score':23},{'index':7,'score':18}], 
    [{'index':1,'score':9},{'index':2,'score':14},{'index':3,'score':19},{'index':4,'score':9},{'index':5,'score':16},{'index':6,'score':24},{'index':7,'score':19}] 
    ]; 

    var colors = [ 
    'steelblue', 
    'green', 
    'red', 
    'purple', 
    'black' 
    ]; 
    var dataset = ["","Or","Se","Tr","De","Cc"]; 
    var dataset_O = ["","O_1","O_2","O_3","O_4","O_5","O_6"]; 
    var dataset_T = ["","T_1","T_2","T_3","T_4","T_5","T_6","T_7"]; 


    var margin = {top: 20, right: 30, bottom: 30, left: 50}, 
     width = 960 - margin.left - margin.right, 
     height = 500 - margin.top - margin.bottom, 
     padding = 30; 

    var x = d3.scale.linear() 
        .domain([0, dataset.length]) 
        .range([0, width]); 

    var y = d3.scale.linear() 
        .domain([-1, 16]) 
        .range([height, 0]); 

    var xAxis = d3.svg.axis() 
        .scale(x) 
        .tickFormat(function(d) { return dataset[d]; }) 
        .tickSize(-height) 
        .tickPadding(10) 
        .tickSubdivide(false) 
        .orient("bottom"); 

    var yAxis = d3.svg.axis() 
        .scale(y) 
        .tickPadding(10) 
        .tickSize(-width) 
        .tickSubdivide(false) 
        .orient("left"); 


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

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

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis); 

    svg.append("g") 
     .attr("class", "y axis") 
     .append("text") 
     .attr("class", "axis-label") 
     .attr("transform", "rotate(-90)") 
     .attr("y", (-margin.left) + 10) 
     .attr("x", -height/2) 
     .text('Axis Label'); 

    svg.append("clipPath") 
     .attr("id", "clip") 
     .append("rect") 
     .attr("width", width) 
     .attr("height", height); 

    var line = d3.svg.line() 
        .interpolate("linear") 
        .x(function(d) { return x(d.index); }) 
        .y(function(d) { return y(d.score); }); 

    svg.selectAll('.line') 
     .data(data) 
     .enter() 
     .append("path") 
     .attr("class", "line") 
     .attr('stroke', function(d,i){  
      return colors[i%colors.length]; 
     }) 
     .attr("d", line); 

    var points = svg.selectAll('.dots') 
        .data(data) 
        .enter() 
        .append("g") 
        .attr("class", "dots") 

    points.selectAll('.dot') 
     .data(function(d, index){  
      var a = []; 
      d.forEach(function(point,i){ 
      a.push({'index': index, 'point': point}); 
      }); 
      return a; 
     }) 
     .enter() 
     .append('circle') 
     .attr('class','dot') 
     .attr("r", 2.5) 
     .attr('fill', function(d,i){ 
      return colors[d.index%colors.length]; 
     }) 
     .attr("transform", function(d) { 
      return "translate(" + x(d.point.index) + "," + y(d.point.score) + ")"; } 
     ); 

    function update1(){ 
     var x = d3.scale.linear() 
         .domain([0, dataset_O.length]) 
         .range([0, width]); 

     var y = d3.scale.linear() 
         .domain([-1, 16]) 
         .range([height, 0]).nice(); 

     xAxis = d3.svg.axis() 
        .scale(x) 
        .tickFormat(function(d) { return dataset_O[d]; }) 
        .tickSize(-height) 
        .tickPadding(10) 
        .tickSubdivide(false) 
        .orient("bottom"); 

     yAxis = d3.svg.axis() 
        .scale(y) 
        .tickPadding(10) 
        .tickSize(-width) 
        .tickSubdivide(false) 
        .orient("left"); 

     var line = d3.svg.line() 
         .interpolate("linear") 
         .x(function(d) { return x(d.index); }) 
         .y(function(d) { return y(d.score); }); 

     svg.selectAll('.line') 
     .data(data_O) 
     .transition(750) 
     .attr("d", line) 
     .attr("class", "line"); 



     // change the x axis 
     svg.select(".x.axis").call(xAxis); 

     // change the y axis 
     svg.select(".y.axis").call(yAxis); 

      var points = svg.selectAll('.dots').data(data_O); 

      //UPDATE - HANDLE the current count 
      points.selectAll('.dot') 
       .data(function(d, index){  
        var a = []; 
        d.forEach(function(point,i){ 
        a.push({'index': index, 'point': point}); 
        }); 
        return a; 
       }) 
       .attr("transform", function(d) { 
        return "translate(" + x(d.point.index) + "," + y(d.point.score) + ")"; 
       }); 



      //ENTER - add the newly added count 
      points.selectAll('.dot') 
       .data(function(d, index){  
        var a = []; 
        d.forEach(function(point,i){ 
        a.push({'index': index, 'point': point}); 
        }); 
        return a; 
       }) 
       .enter() 
       .append('circle') 
       .attr('class','dot') 
       .attr("r", 2.5) 
       .attr('fill', function(d,i){ 
        return colors[d.index%colors.length]; 
       }) 
       .attr("transform", function(d) { 
        return "translate(" + x(d.point.index) + "," + y(d.point.score) + ")"; 
       }); 


      d3.selectAll('g.dots').data(data_O).exit().remove(); 



    } 

    function update2(){ 
     var x = d3.scale.linear() 
         .domain([0, dataset_T.length]) 
         .range([0, width]); 

     //var yExtents = d3.extent(d3.merge(data_T), function (d) { return d.score; }); 
     var y = d3.scale.linear() 
         .domain([-1, 29]) 
         .range([height, 0]).nice(); 

     xAxis = d3.svg.axis() 
        .scale(x) 
        .tickFormat(function(d) { return dataset_T[d]; }); 

     var line = d3.svg.line() 
         .interpolate("linear") 
         .x(function(d) { return x(d.index); }) 
         .y(function(d) { return y(d.score); }); 

     svg.selectAll('.line') 
      .data(data_T) 
      .transition(750) 
      .attr("d", line) 
      .attr("class", "line"); 

     svg.select(".x.axis").call(xAxis); 

     svg.select(".y.axis").call(yAxis); 

     var points = svg.selectAll('.dots').data(data_T); 

     //ENTER - add the newly added count 
     points.selectAll('.dot') 
      .data(function(d, index){  
       var a = []; 
       d.forEach(function(point,i){ 
       a.push({'index': index, 'point': point}); 
       }); 
       return a; 
      }) 
      .enter() 
      .append('circle') 
      .attr('class','dot') 
      .attr("r", 2.5) 
      .attr('fill', function(d,i){ 
       return colors[d.index%colors.length]; 
      }) 
      .attr("transform", function(d) { 
       return "translate(" + x(d.point.index) + "," + y(d.point.score) + ")"; 
      }); 


     //UPDATE - HANDLE the current count 
     points.selectAll('.dot') 
      .data(function(d, index){  
       var a = []; 
       d.forEach(function(point,i){ 
       a.push({'index': index, 'point': point}); 
       }); 
       return a; 
      }) 
      .attr("transform", function(d) { 
       return "translate(" + x(d.point.index) + "," + y(d.point.score) + ")"; 
      }); 
    } 
</script> 

はいじるするためのリンクです: https://jsfiddle.net/aakashjain/1dc57aL7/1/

答えて

1

あなたが "終了" を選択する必要があります。ここ

points.selectAll('.dot') 
    .data(function(d, index){  
     var a = []; 
     d.forEach(function(point,i){ 
      a.push({'index': index, 'point': point}); 
     }); 
      return a; 
     }) 
    .exit() 
    .remove(); 

は、更新フィドル:です。 https://jsfiddle.net/1dc57aL7/2/

+0

おかげで私の問題を解決トンヘラルド、(ちょうど先端。あなたはここで重複コードの多くを持っているあなたの「アップデート1」と「アップデート2」の機能は、道より小さくすることができます)。私はexit()をd3.selectAll( 'g.dots').data(data_O).exit()。remove();として使用していましたが、予想された変更を反映していませんでした。 –

+1

とコードの重複のために頭をアップしてくれてありがとう、私はd3に新しいです、ここで関数の長さを減らそうとするでしょう。実行可能な場合は、どの部分を削除できるか教えてください。 –

+0

ああ、ここには重複した部分がたくさんある!残念ながら、私は携帯電話でJSfiddleを入力するのは非常に不快ですが、他の人がこれについてあなたを助けてくれると確信しています。あなたが望むなら、それを新しい質問として投稿することをお勧めします。 –

関連する問題