Question

我想创建一个可排序的D3表，用于更新用户编号输入。＆＃34; Blend＆＃34;表的列应根据用户输入进行更新。 sort函数有效（改编自http://jsfiddle.net/89Lfpvhs/），数据似乎正在正确更新（基于console.log（数据）），但我不能为我的生活获取＆＃的表格文本34;混合＆＃34;列相应更新！我真的很感激任何帮助。

工作代码：

var margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var canvas = d3.select(".canvas")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var headerGrp = canvas.append("g").attr("class", "headerGrp");
var rowsGrp = canvas.append("g").attr("class","rowsGrp");

var fieldHeight = 30;
var fieldWidth = 90;

var previousSort = null;

//Get data and initialize table

var data = [{"Team":"Alabama","mp_prior":"29.18","mp_prior_rank":"1","mp_season":"18.790359","mp_season_rank":"3","mp_full":"30.67","mp_full_rank":"1"},
{"Team":"Ohio State","mp_prior":"26.459999","mp_prior_rank":"2","mp_season":"20.596975","mp_season_rank":"1","mp_full":"26.540001","mp_full_rank":"2"},
{"Team":"Oklahoma","mp_prior":"19.059999","mp_prior_rank":"7","mp_season":"20.032782","mp_season_rank":"2","mp_full":"25.360001","mp_full_rank":"3"},
{"Team":"Ole Miss","mp_prior":"16.68","mp_prior_rank":"12","mp_season":"15.750935","mp_season_rank":"6","mp_full":"21.77","mp_full_rank":"4"},
{"Team":"Clemson","mp_prior":"15.34","mp_prior_rank":"17","mp_season":"17.1474","mp_season_rank":"5","mp_full":"21.360001","mp_full_rank":"5"},
{"Team":"Baylor","mp_prior":"16.639999","mp_prior_rank":"13","mp_season":"17.723907","mp_season_rank":"4","mp_full":"20.5","mp_full_rank":"6"}];

console.log(data);

  range = document.getElementById("range").value;

    data.forEach(function(d,i) {
        function key(d) {return d.Team;}
        d.Priors = +d.mp_prior_rank;
        d.In_Season = +d.mp_season_rank;
        d.Blend = +(range/100*(+d.mp_prior_rank))+((1-(range/100))*(+d.mp_season_rank));
    });

// CREATE THE TABLE 
  var header = headerGrp.selectAll("g")
    //to select only columns I care about showing
    .data(d3.keys(data[0]).filter(function(key) {
      return key != "date" && key != "mp_prior" && key != "mp_season" && key != "blend25" && key != "blend50" && key != "blend75" && key != "blend25_rank" && key != "blend50_rank" && key != "blend75_rank"&& key != "mp_full" && key != "mp_full_rank" && key != "mp_prior_rank" && key != "mp_season_rank" && key != "Blend_val";
      }))
    .enter().append("g")
    .attr("class", "header")
    .attr("id","header")
    .attr("transform", function (d, i){
      return "translate(" + i * fieldWidth + ",0)";
    })
    .on("click", function(d){ return refreshTable(d);});

  header.append("rect")
    .attr("width", fieldWidth-1)
    .attr("height", fieldHeight);

  header.append("text")
    .attr("x", fieldWidth / 2)
    .attr("y", fieldHeight / 2)
    .attr("dy", ".35em")
    .text(String);

  // select rows
    var rows = rowsGrp.selectAll("g.row").data(data, 
    function(d){ return d.Team; });

  // create rows  
  var rowsEnter = rows.enter().append("svg:g")
    .attr("class","row")
    .attr("transform", function (d, i){
      return "translate(0," + (i+1) * (fieldHeight+1) + ")";
    });

  // select cells (only for columns I care about!)
  var cells = rows.attr("id","cells").selectAll("g.cell").data(function(d){return d3.values([d.Team, +d.Priors, +d.In_Season, +d.Blend]);});

  // create cells
  var cellsEnter = cells.enter().append("svg:g")
    .attr("class", "cell")
    .attr("transform", function (d, i){
      return "translate(" + i * fieldWidth + ",0)";
    });

    // fill the table   
  cellsEnter.append("rect")
    .attr("width", fieldWidth-1)
    .attr("height", fieldHeight); 

  var text = cellsEnter.append("text")
    .attr("x", fieldWidth / 2)
    .attr("y", fieldHeight / 2)
    .attr("dy", ".35em")
    .text(function(d) {return d});

  refreshTable(null);

  // when the input range changes update the line and table values 
  d3.select("#range").on("input", function() {
  refreshTable(null);
  });

function refreshTable(sortOn){
  console.log(data);
 range = document.getElementById("range").value;
  data.forEach(function(d,i) {
        function key(d) {return d.Team;}
        d.Priors = +d.mp_prior_rank;
        d.In_Season = +d.mp_season_rank;
        d.Blend = +(range/100*(+d.mp_prior_rank))+((1-(range/100))*(+d.mp_season_rank));
    });

  // adjust the text on the input
  d3.select("#range-value").text(range);
  //adjusts the value of the input to 
  d3.select("#range").property("value", range);

    //update if not in initialisation
    if(sortOn !== null) {
            // update rows
            if(sortOn != previousSort){
                rows.sort(function(a,b){return sort(a[sortOn], b[sortOn]);});           
                previousSort = sortOn;
            }
            else{
                rows.sort(function(a,b){return sort(b[sortOn], a[sortOn]);});
                previousSort = null;
            }
            rows.transition()
                .duration(500)
                .attr("transform", function (d, i){
                    return "translate(0," + (i+1) * (fieldHeight+1) + ")";
                });
    }
}

function sort(a,b){
    if(typeof a == "string"){
        var parseA = format.parse(a);
        if(parseA){
            var timeA = parseA.getTime();
            var timeB = format.parse(b).getTime();
            return timeA > timeB ? 1 : timeA == timeB ? 0 : -1;
        }
        else 
            return a.localeCompare(b);
    }
    else if(typeof a == "number"){
        return a > b ? 1 : a == b ? 0 : -1;
    }
    else if(typeof a == "boolean"){
        return b ? 1 : a ? -1 : 0;
    }
}

到目前为止我所拥有的：http://jsfiddle.net/monicawojciechowski/89Lfpvhs/20/

Answer 1

d3中没有自动更新元素的魔力。您需要通过重新绑定数据并更新值来自己完成。在你的情况下：

cells.data(function(d){return d3.values([d.Team, +d.Priors, +d.In_Season, +d.Blend]);})
  .select("text")
  .text(function(d) {return d});

更新了fiddle。

数据更新，但基于数据的D3表没有

1 个答案: