Javascript d3js：更新数据数组并更改图形

我有一个d3脚本，其数据如下所示：

var data = [{name: "A", rank: 0, student_percentile: 100.0},
            {name: "B", rank: 45, student_percentile: 40.3},
            {name: "C", rank: 89, student_percentile: 89.7},
            {name: "D", rank: 23, student_percentile: 10.9},
            {name: "E", rank: 56, student_percentile: 30.3}];

已从服务器获取此数据数组

我有一个d3脚本，如下所示：

function d3Data(){
    data = data.sort(function(x,y){
            return d3.ascending(+x.rank, +y.rank);
        });
    var size = document.getElementById("range").value;
    console.log(size);
    data = data.slice(0,size);
    d3(data);
}

function d3(data){
    var margin = 40,
    width = 600,
    height = 400;
    console.log(data);

    var xscale = d3.scaleLinear()
                  .domain(
                        d3.extent(data, function(d) { return +d.student_percentile; })
                    )
                  .nice() 
                  .range([0, width]);

    var yscale = d3.scaleLinear()
                  .domain(d3.extent(data, function(d) { return +d.rank; }))
                  .nice()
                  .range([height, 0]);

    var xAxis = d3.axisBottom().scale(xscale);

    var yAxis = d3.axisLeft().scale(yscale);

    var svg = d3.select('.chart')
                    .append('svg')
                    .attr('class', 'chart')
                    .attr("width", width + margin + margin)
                    .attr("height", height + margin + margin + 10   )
                    .append("g")
                    .attr("transform", "translate(" + margin + "," + margin + ")");

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

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

    var color = d3.scaleOrdinal(d3.schemeCategory10);

    var circles = svg.selectAll(null)
          .data(data)
          .enter()
          .append("circle")
          .attr("cx", width / 2)
          .attr("cy", height / 2)
          .attr("opacity", 0.3)
          .attr("r", 20)
          .style("fill", "blue")
          .attr("cx", function(d) {
            return xscale(+d.student_percentile);
          })
          .attr("cy", function(d) {
            return yscale(+d.rank);
          })
          .on('mouseover', function(d, i) {
            d3.select(this)
              .transition()
              .duration(1000)
              .ease(d3.easeBounce)
              .attr("r", 32)
              .style("fill", "orange")
              .style("cursor", "pointer")
              .attr("text-anchor", "middle");

    texts.filter(function(e) {
        return e.rank === d.rank;
      })
      .attr("font-size", "20px")
      })
      .on('mouseout', function(d, i) {
        d3.select(this).transition()
          .style("opacity", 0.3)
          .attr("r", 20)
          .style("fill", "blue")
          .style("cursor", "default");
        texts.filter(function(e) {
            return e.rank === d.rank;
          })
        .transition()
        .duration(1000)
        .ease(d3.easeBounce)
        .attr("font-size", "10px")
      });

    var texts = svg.selectAll(null)
      .data(data)
      .enter()
      .append('text')
      .attr("x", function(d) {
        return xscale(+d.student_percentile);
      })
      .attr("text-anchor", "middle")
      .attr("y", function(d) {
        return yscale(+d.rank);
      })
      .text(function(d) {
        return +d.student_percentile;
      })
      .attr("pointer-events", "none")
      .attr("font-family", "sans-serif")
      .attr("font-size", "10px")
      .attr("fill", "red");

    svg.append("text")
        .attr("transform", "translate(" + (width / 2) + " ," + (height + margin) + ")")
        .style("text-anchor", "middle")
        .text("Percentile");

    svg.append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 0 - margin)
        .attr("x",0 - (height / 2))
        .attr("dy", "1em")
        .style("text-anchor", "middle")
        .text("Rank");

    $('circle').tipsy({ 
        console.log("tipsy");
        gravity: 'w', 
        html: true, 
        title: function() {
            var d = this.__data__;
            return d.name + '<br/>' + d.rank; 
        }
    });
}

$(document).ready(function(){
    d3Data();
});

function rangeVal(){
    d3Data();
}

function fadeOut() {
    svg.selectAll("circle")
    .transition()
    .style("opacity", 0.3)
    .attr("r", 20)
    .style("fill", "blue");
}

function handleMouseOver() {
    d3.select(this)
    .attr("r", 32)
    .style("fill", "orange");
}

函数d3Data（）{
data=data.sort（函数（x，y）{
返回d3升序（+x.rank，+y.rank）；
});
var size=document.getElementById（“范围”）.value；
控制台日志（大小）；
data=data.slice（0，大小）；
d3（数据）；
}
功能d3（数据）{
var保证金=40，
宽度=600，
高度=400；
控制台日志（数据）；
var xscale=d3.scaleLinear（）
.域名(
d3.范围（数据，函数（d）{return+d.student_百分位数；}）
)
.尼斯
.范围（[0，宽度]）；
var yscale=d3.scaleLinear（）
.domain（d3.extent（数据，函数（d）{return+d.rank；}））
.尼斯
.范围（[高度，0]）；
var xAxis=d3.axisBottom（）.scale（xscale）；
var yAxis=d3.axisLeft（）.scale（yscale）；
var svg=d3.select（“.chart”）
.append（'svg'）
.attr（'类'，'图表'）
.attr（“宽度”，宽度+边距+边距）
.attr（“高度”，高度+边距+边距+10）
.附加（“g”）
.attr（“转换”、“转换”（“+margin+”，“+margin+”））；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
var color=d3.scaleOrdinal（d3.schemeCategory 10）；
var circles=svg.selectAll（空）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“cx”，宽度/2）
.attr（“cy”，高度/2）
.attr（“不透明度”，0.3）
.attr（“r”，20）
.style（“填充”、“蓝色”）
.attr（“cx”，功能（d）{
返回xscale（+d.student_百分位数）；
})
.attr（“cy”，函数（d）{
返回yscale（+d.rank）；
})
.on（'mouseover'，函数（d，i）{
d3.选择（本）
.transition（）
.持续时间（1000）
.轻松（d3.轻松反弹）
.attr（“r”，32）
.style（“填充”、“橙色”）
.style（“光标”、“指针”）
.attr（“文本锚定”、“中间”）；
文本。过滤器（功能（e）{
返回e.rank==d.rank；
})
.attr（“字体大小”，“20px”）
})
.on（'mouseout'，函数（d，i）{
d3.选择（this）.transition（）
.样式（“不透明度”，0.3）
.attr（“r”，20）
.style（“填充”、“蓝色”）
.style（“光标”、“默认值”）；
文本。过滤器（功能（e）{
返回e.rank==d.rank；
})
.transition（）
.持续时间（1000）
.轻松（d3.轻松反弹）
.attr（“字体大小”，“10px”）
});
var text=svg.selectAll（空）
.数据（数据）
.输入（）
.append（'文本'）
.attr（“x”，函数（d）{
返回xscale（+d.student_百分位数）；
})
.attr（“文本锚定”、“中间”）
.attr（“y”，函数（d）{
返回yscale（+d.rank）；
})
.文本（功能（d）{
return+d.student\u百分位数；
})
.attr（“指针事件”、“无”）
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，“10px”）
.attr（“填充”、“红色”）；
svg.append（“文本”）
.attr（“变换”、“平移”（+（宽度/2）+）、“+（高度+边距）+”）
.style（“文本锚定”、“中间”）
.文本（“百分位”）；
svg.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，0-边距）
.attr（“x”，0-（高度/2））
.attr（“dy”、“1em”）
.style（“文本锚定”、“中间”）
.文本（“排名”）；
$（'circle'）。醉酒（{
控制台日志（“醉酒”）；
重力：“w”，
是的，
标题：函数（）{
var d=该数据；
返回d.name+'
'+d.rank；
}
});
}
$（文档）.ready（函数（）{
d3Data（）；
});
函数rangeVal（）{
d3Data（）；
}
函数衰减（）{
svg.selectAll（“圆圈”）
.transition（）
.样式（“不透明度”，0.3）
.attr（“r”，20）
.样式（“填充”、“蓝色”）；
}
函数handleMouseOver（）{
d3.选择（本）
.attr（“r”，32）
.样式（“填充”、“橙色”）；
}

我在加载文档和单击按钮时调用函数d3Data（rangeVal是在单击按钮时调用的函数）。在单击按钮时，我想对数据应用不同的过滤器，然后再次生成图形。目前正在发生的是，我在点击按钮时得到多个图形，但现有的图形没有得到更新。电流输出如图所示：

---

我只希望d3Data（）函数在每次单击按钮时更新原始数据数组，然后再次生成图形。我该怎么做呢？

我找到了解决办法。我不得不做两个改变。在函数d3data中，我一次又一次地更新同一数组，因此数据没有得到正确更新，在调用d3（）之前，我必须删除现有的图形

function d3Data(){
    data_sorted = data.sort(function(x,y){
            return d3.ascending(+x.rank, +y.rank);
        });  // update array and put it in another variable
    var size = document.getElementById("range").value;
    console.log(size);
    data_sliced = data_sorted.slice(0,size);
    d3.select('.chart').html("");  //this to remove existing graph
    d3(data_sliced);
}

---

每次都依赖于新创建的SVG数据。因此，您必须在创建之前删除SVG

    //d3.select("Your Id Name or Your Class Name").select("svg").remove();

在您的代码中，我更改如下

d3.select('.chart').select("svg").remove();
var svg = d3.select('.chart')