Question

我有一个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（rangeVal是按钮单击时调用的函数）。单击按钮，我想对数据应用不同的过滤器，然后再次生成图表。目前正在发生的事情是我在点击按钮时获得了多个图表，但现有图表没有得到更新。当前输出如下所示：multiple graphs

我只想让d3Data（）函数在每次单击按钮时更新原始数据数组，然后再次生成图形。我怎么能这样做？

Answer 1

每次都依赖于新创建的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')

Answer 2

我找到了解决方案。我不得不做两处改动。在函数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);
}

d3js：更新数据数组并更改图表

2 个答案: