Fatal编程技术网
  • javascript/
  • Javascript exit（）.remove（）不'；t在d3.js中更新之前删除旧图表

Javascript exit（）.remove（）不'；t在d3.js中更新之前删除旧图表

javascript jquery svg d3.js charts

Javascript exit（）.remove（）不'；t在d3.js中更新之前删除旧图表,javascript,jquery,svg,d3.js,charts,Javascript,Jquery,Svg,D3.js,Charts,我有一个使用在同一页面上创建多个图表的代码。每个函数都与第一个svg一起使用 var svg = svg1.enter().append("svg:svg") svg.attr("class", "r_chart") .attr("width", left_width + width) .attr("height", height) .attr('viewBox', '0 0 350 310') .attr('perserveAspectRatio'

我有一个使用
在同一页面上创建多个图表的代码。每个
函数都与第一个svg一起使用


 var svg = svg1.enter().append("svg:svg")
  svg.attr("class", "r_chart")
     .attr("width", left_width + width)
     .attr("height", height)
     .attr('viewBox', '0 0 350 310')
     .attr('perserveAspectRatio', 'xMinYMid')
    .each(function(d,no){
       var base = d3.select(this); 
       base.selectAll("g").data(d.values);
      ....
    })


有人能指出为什么在使用jQuery
change
函数更新select之前没有从DOM中删除旧图表吗？我有
svg1.exit（）.remove（）在函数末尾：


`svg1.exit().remove();`


下面是页面加载时显示的JSON数据


[{"name":"A","tid":"54","image":"img","measure":32,"group":"53"},
{"name":"B","tid":"55","image":"img","measure":45,"group":"53"},
{"name":"R","tid":"59","image":"img","measure":40,"group":"23"},
{"name":"T","tid":"29","image":"img","measure":20,"group":"23"}]


以及更新


[{"name":"G","tid":"14","image":"img","measure":78,"group":"53"},
 {"name":"S","tid":"85","image":"img","measure":25,"group":"55"},
 {"name":"U","tid":"44","image":"img","measure":78,"group":"53"}, 
 {"name":"K","tid":"29","image":"img","measure":32.6,"group":"55"}, 
 {"name":"Y","tid":"53","image":"img","measure":30,"group":"24"},
 {"name":"O","tid":"26","image":"img","measure":25,"group":"24"}]


完整代码：


var width = 350,
    height = 310,
    barHeight = 80,
    left_width = 80,
    fo_height = 70;
var x = d3.scale.linear().range([0, width / 1.5]);
    y = d3.scale.ordinal().rangeBands([0, height]);

function chart(array){
  array = JSON.parse(array);
  console.log(array);
  var colors = ['#222','red','blue'];
  var nested_data = d3.nest().key(function(d) { return d.group; }).entries(array);
  ymax = d3.max(nested_data,function(d){
     return d.values.map(function(t){
         return t.measure;
     })
  });
  nested_data.forEach(function(nd){
    nd.values.forEach(function(d){      
      d.measure = +d.measure;
    }) 

  })
  var diff = 2;
  var tickno = 5
  var ymax = d3.max(nested_data, function(nd,k) { 
   return d3.max(nd.values,function(p,l){
      return p.measure ;
   }); 
  });
  var ymin = d3.min(nested_data, function(nd,k) { 
   return d3.min(nd.values,function(p,l){
      return p.measure - 2;
   }); 
  });

  x.domain([ymin ,ymax]);
  console.log(nested_data);
  var svg1 = d3.select('.chart').selectAll("svg").data(nested_data)
  var svg = svg1.enter().append("svg:svg")
  svg.attr("class", "r_chart")
     .attr("width", left_width + width)
     .attr("height", height)
     .attr('viewBox', '0 0 350 310')
     .attr('perserveAspectRatio', 'xMinYMid')
    .each(function(d,no){
       var count = 1;
       var base = d3.select(this); 
       var bar1 =  base.selectAll("g").data(d.values);
       var bar = bar1.enter().append("g")
           .attr("transform", function(t, i) {  
               return "translate("+left_width * count+"," + (i+0.5) * barHeight + ")"; 
               count++; 
           });

       var rule1 = base.selectAll(".rule")
        .data(x.ticks(5));
       var rule = rule1.enter().append("text");
       rule.attr("class", "rule changeprice")
        .attr("x", function(d) { return x(d) + left_width ; })
        .attr("y", barHeight /2)
        .attr("dy", -6)
        .attr("text-anchor", "middle")
        .attr("font-size", 10)
        .text(String);

       var rect =  bar.append("rect") 
            .style("fill", function(v,l) {
              return colors[l] 
            })
            .attr("width", 0)
            .attr("height", barHeight - 20)
            .attr("rx", 2)
            .attr("width", function(t){ 
              return x(t.measure) + 'px'; 
            })

           bar.append("text")
            .attr("dx", - left_width)
            .attr("dy", fo_height )
            .style("font-size",'10px') 
            .text(function(t) { return t.name; })
    }) // each fucntion
    svg1.exit().remove();
}
var array = $('#a2').text();
chart(array);

$('select').on('change',function(){
  var get = $(this).val();
  var data = $('#a'+get).text();
  chart(data)
});


给你：

请告诉我这是否是你需要的。我改变了创建svg1变量的方法。在改变之后立即删除项目通常会更好。我也有exit（）.remove（）的问题，过了很长时间才发现。这不是d3应该使用的方式，但它工作得很好


css:

.data{display:none}

html:
<select><option>Select</option><option value='1'>1</option><option value='2'>2</option></select>
        <div class="chart"></div>
        <div id='a2' class="data">[{"name":"A","tid":"54","image":"img","measure":32,"group":"53"},{"name":"B","tid":"55","image":"img","measure":45,"group":"53"},{"name":"R","tid":"59","image":"img","measure":40,"group":"23"},{"name":"T","tid":"29","image":"img","measure":20,"group":"23"}]</div>

        <div id='a1' class='data'>[{"name":"G","tid":"14","image":"img","measure":78,"group":"53"},{"name":"S","tid":"85","image":"img","measure":25,"group":"55"},
         {"name":"U","tid":"44","image":"img","measure":78,"group":"53"}, {"name":"K","tid":"29","image":"img","measure":32.6,"group":"55"}, {"name":"Y","tid":"53","image":"img","measure":30,"group":"24"},{"name":"O","tid":"26","image":"img","measure":25,"group":"24"}]</div>


js:
    var width = 350,
        height = 310,
        barHeight = 80,
        left_width = 80,
        fo_height = 70;
    var x = d3.scale.linear().range([0, width / 1.5]);
        y = d3.scale.ordinal().rangeBands([0, height]);

    function chart(array){
      array = JSON.parse(array);
      console.log(array);
      var colors = ['#222','red','blue'];
      var nested_data = d3.nest().key(function(d) { return d.group; }).entries(array);
      ymax = d3.max(nested_data,function(d){
         return d.values.map(function(t){
             return t.measure;
         })
      });
      nested_data.forEach(function(nd){
        nd.values.forEach(function(d){      
          d.measure = +d.measure;
        }) 

      })
      var diff = 2;
      var tickno = 5
      var ymax = d3.max(nested_data, function(nd,k) { 
       return d3.max(nd.values,function(p,l){
          return p.measure ;
       }); 
      });
      var ymin = d3.min(nested_data, function(nd,k) { 
       return d3.min(nd.values,function(p,l){
          return p.measure - 2;
       }); 
      });

      x.domain([ymin ,ymax]);
      console.log(nested_data);
      svg1 = d3.select('.chart').selectAll("svg").data(nested_data)

      var svg = svg1.enter().append("svg:svg")
      svg.attr("class", "r_chart")
         .attr("width", left_width + width)
         .attr("height", height)
         .attr('viewBox', '0 0 350 310')
         .attr('perserveAspectRatio', 'xMinYMid')
        .each(function(d,no){
           var count = 1;
           var base = d3.select(this); 
           var bar1 =  base.selectAll("g").data(d.values);
           var bar = bar1.enter().append("g")
               .attr("transform", function(t, i) {  
                   return "translate("+left_width * count+"," + (i+0.5) * barHeight + ")"; 
                   count++; 
               });

           var rule1 = base.selectAll(".rule")
            .data(x.ticks(5));
           var rule = rule1.enter().append("text");
           rule.attr("class", "rule changeprice")
            .attr("x", function(d) { return x(d) + left_width ; })
            .attr("y", barHeight /2)
            .attr("dy", -6)
            .attr("text-anchor", "middle")
            .attr("font-size", 10)
            .text(String);

           var rect =  bar.append("rect") 
                .style("fill", function(v,l) {
                  return colors[l] 
                })
                .attr("width", 0)
                .attr("height", barHeight - 20)
                .attr("rx", 2)
                .attr("width", function(t){ 
                  return x(t.measure) + 'px'; 
                })

               bar.append("text")
                .attr("dx", - left_width)
                .attr("dy", fo_height )
                .style("font-size",'10px') 
                .text(function(t) { return t.name; })
        }) // each fucntion

    }
    var array = $('#a2').text();
    var svg1;
    chart(array);

    $('select').on('change',function(){
      var get = $(this).val();
      var data = $('#a'+get).text();
      svg1.remove();
      chart(data)
    });



css:
.data{显示：无}
html:
选择12
[{“名称”：“A”，“tid”：“54”，“图像”：“img”，“度量”：32，“组”：“53”}，{“名称”：“B”，“tid”：“55”，“图像”：“img”，“度量”：45，“组”：“53”}，{“名称”：“R”，“tid”：“59”，“图像”：“img”，“度量”：40，“组”：“23”}，{“名称”：“T”，“tid”：“29”，“图像”：“img”，“度量”：20，“组”：“23”}]
[{“名称”：“G”，“tid”：“14”，“图像”：“img”，“度量值”：78，“组”：“53”}，{“名称”：“S”，“tid”：“85”，“图像”：“img”，“度量值”：25，“组”：“55”}，
{“名称”：“U”，“tid”：“44”，“图像”：“img”，“度量值”：78，“组”：“53”}，{“名称”：“K”，“tid”：“29”，“图像”：“img”，“度量值”：32.6，“组”：“55”}，{“名称”：“Y”，“tid”：“53”，“图像”：“img”，“度量值”：30，“组”：“24”}，{“名称”：“O”，“tid”：“26”，“图像”：“img”，“度量值”：25，“组”：“24”}]
js:
可变宽度=350，
高度=310，
杆高=80，
左_宽度=80，
fo_高度=70；
var x=d3.刻度.线性（）.范围（[0，宽度/1.5]）；
y=d3.scale.ordinal（）.范围带（[0，高度]）；
功能图（数组）{
array=JSON.parse（array）；
console.log（数组）；
变量颜色=['#222'，'红色'，'蓝色'；
var nested_data=d3.nest（）.key（函数（d）{return d.group；}）.entries（数组）；
ymax=d3.max（嵌套_数据，函数（d）{
返回d.values.map（函数（t）{
返回t.measure；
})
});
嵌套的\u data.forEach（函数（nd）{
forEach（函数（d）{
d、 measure=+d.measure；
}) 
})
var-diff=2；
var tickno=5
var ymax=d3.max（嵌套的_数据，函数（nd，k）{
返回d3最大值（nd值，函数（p，l）{
返回p.measure；
}); 
});
var ymin=d3.min（嵌套的_数据，函数（nd，k）{
返回d3.min（第二个值，函数（p，l）{
返回p.measure-2；
}); 
});
x、 域（[ymin，ymax]）；
console.log（嵌套的_数据）；
svg1=d3。选择（'.chart'）。选择全部（“svg”）。数据（嵌套的_数据）
var svg=svg1.enter（）.append（“svg:svg”）
attr（“类”、“r_图”）
.attr（“宽度”，左\宽度+宽度）
.attr（“高度”，高度）
.attr（'viewBox'，'0 0 350 310'）
.attr（'perserveAspectRatio'，'xMinYMid'）
.每个（功能（d，否）{
var计数=1；
var base=d3。选择（此项）；
var bar1=基本。选择全部（“g”）。数据（d.值）；
var bar=bar1.enter（）.append（“g”）
.attr（“变换”，函数（t，i）{
返回“translate（“+left_width*count+”，“+（i+0.5）*barHeight+”）；
计数++；
});
var rule1=base.selectAll（“.rule”）
.数据（x.5）；
var rule=rule1.enter（）.append（“文本”）；
rule.attr（“类”，“规则变更价格”）
.attr（“x”，函数（d）{return x（d）+left_width；}）
.attr（“y”，酒吧高度/2）
.attr（“dy”，-6）
.attr（“文本锚定”、“中间”）
.attr（“字体大小”，10）
.文本（字符串）；
var rect=bar.append（“rect”）
.样式（“填充”，功能（v，l）{
返回颜色[l]
})
.attr（“宽度”，0）
.attr（“高度”，酒吧高度-20）
.attr（“rx”，2）
.attr（“宽度”，函数（t）{
返回x（t.measure）+‘px’；
})
附加条（“文本”）
.attr（“dx”，-左侧宽度）
.attr（“dy”，fo_高度）
.style（“字体大小”，“10px”）
.text（函数（t）{返回t.name；}）
})//每个功能
}
var数组=$（'#a2'）.text（）；
var-svg1；
图表（数组）；
$（'select'）。在（'change'，function（）上{
var get=$（this.val（）；
var data=$（'#a'+get）.text（）；
svg1.remove（）；
图表（数据）
});