d3의 선 그래프에서 오래된 점을 제거하십시오.

여러 줄 그래프를 작성하고 버튼 클릭시 데이터를 업데이트하려고합니다. 각 라인에서, 나는 cirlce와 교차점을 강조하고 싶다. 이제 버튼을 클릭 할 때 라인 경로를 업데이트 할 수 있었지만 이전 강조 표시된 교차점은 svgContainer에서 제거되지 않았습니다. (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/

출처

2016-10-10 Aakash Jain

당신이 "종료"선택해야합니다 : 여기

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/

출처

2016-10-10 11:37:30

덕분에 내 문제를 해결 톤 제라르, (그냥 팁. 당신이 여기 중복 코드를 많이 가지고 귀하의 "갱신 1"과 "갱신 2"기능이 방법 작을 수 있습니다). exit() 선택을 d3.selectAll ('g.dots'). data (data_O) .exit(). remove();로 사용했지만 예상 된 변경 사항을 반영하지 못했습니다. –

그리고 코드 중복에 대한 고맙습니다. 저는 d3을 처음 접했고 여기에서 함수 길이를 줄이려고합니다. 가능하다면 어떤 부분을 제거 할 수 있는지 말해 주시겠습니까? –

오, 중복 된 부분이 많이 있습니다! 불행히도 나는 JSfiddle을 타이핑하기 매우 불편한 나의 휴대폰을 사용하고 있지만, 다른 사람이이 점에 관해 당신을 도울 것이라고 확신한다. 나는 원한다면 그것을 새로운 질문으로 게시 할 것을 제안한다. –

d3의 선 그래프에서 오래된 점을 제거하십시오.

답변

관련 문제