从d3

Question

我正在尝试创建一个多线图并在按钮点击时更新数据。在每一行上，我想用cirlce突出显示交叉点。现在点击按钮，我可以更新线路径，但是旧的突出显示的交叉点不会从svgContainer中删除（对于eaxmple单击update2，然后update1不会删除未连接到任何线路的最后一组圆圈）。

 <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/

Answer 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/

（只是一个小贴士：你这里有很多重复的代码。你的“update1”和“update2”功能可能会更小）