D3.js试图实现sortable svg表 [英] D3.js trying to implement sortable svg table

问题描述

因为我的标题指出Iam试图实现一个交互式表与漂亮的转换，这就是为什么我选择D3.js结合女巫svg元素。

As my title states Iam trying to implement an interactive table with nice transitions, thats why I choose D3.js in combination witch svg elements.

我设法实现具有正常HTML元素（th，tr，td）的可排序表格：

I managed to implement a sortable table with normal HTML elements (th,tr,td):

http ：//jsfiddle.net/recek/q6LE6/

// create the table header
var thead = d3.select("thead").selectAll("th")
    .data(d3.keys(jsonData[0]))
    .enter().append("th").text(function(d){return d;})
    .on("click", function(d){ return refreshTable(d);});

// fill the table   
// create rows
var tr = d3.select("tbody").selectAll("tr").data(jsonData); 
tr.enter().append("tr");

// create cells
var td = tr.selectAll("td").data(function(d){return d3.values(d);});    
td.enter().append("td")
    .text(function(d) {return d;});

//update?
if(sortOn !== null) {           
        // update rows
        if(sortOn != previousSort){
            tr.sort(function(a,b){return sort(a[sortOn], b[sortOn]);});
            previousSort = sortOn;
        }
        else{
            tr.sort(function(a,b){return sort(b[sortOn], a[sortOn]);});
            previousSort = null;
        }

        //update cells
        td.text(function(d) {return d;});
}

正如你所看到的，当点击标题元素。
基于上表我开始实现这个表的svg版本，这是我到目前为止：

As you can see the table sorts the data correctly when clicking on the header elements. Based on the above table I started to implement the svg version of this table and this is how I got so far:

http://jsfiddle.net/recek/v58zT/

// create the table header  
var header = headerGrp.selectAll("g")
    .data(d3.keys(jsonData[0]))
  .enter().append("g")
    .attr("class", "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);

// fill the table   
// select rows
var rows = rowsGrp.selectAll("g.row").data(jsonData);

// 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
var cells = rows.selectAll("g.cell").data(function(d){return d3.values(d);});

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

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

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

//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) + ")";
            });

        //update cells
        rows.selectAll("g.cell").select("text").text(String);
}

目前无法解决的问题是排序不相当的工作。当点击标题时，会发生一些情况，但是行不能正确排序。
对我来说很奇怪的是，当检查浏览器中的html元素时，g.row元素根据绑定到它们的数据正确排序。

The problem Iam currently not able to solve, is that the sorting doesn't quite work. When clicking on the headers something happens, but the rows are not sorted correctly. What seems very strange to me is, that when inspecting the html elements in the browser, the g.row elements are sorted correctly according to the data bound to them.

我不认为我的排序函数有问题，因为IAM在两个表中使用相同的。
我的猜测是，新排序的行不喂给正确的单元格，但我不知道如何解决这个问题。

I don't think there is a problem with my sort function, because Iam using the same one in both tables. My guess is that the newly sorted rows are not feeded with the right cells, but I don't know how to solve this problem.

编辑：
Ok我设法将单元格中的文本更新为新的排序顺序。更正的代码在jsfiddle上，也在这里编辑。
但仍然有一个问题，我只是不明白：

Ok I managed to update the text in the cells to the new sorting order correctly. The corrected code is on jsfiddle and also edited here. But there remains still one problem I just don't understand:

行到新位置的转换不匹配新排序的数据bound给他们。例如，当在id上多次点击时，你会看到我的意思。
有可能参数i，我用来转换到新的位置不代表新排序的顺序？
我发现了这个例子，它和我的类似，并且转换正常工作：

The transition of the rows to their new positions don't match the newly sorted data bound to them. For example when clicking multiple times on "id" you will see what I mean. Is it possible that the paramater "i", which I use to transition to the new positions doesn't represent the newly sorted order? I found this example, which is similar to mine and the transition works correctly:

http：// examples.oreilly.com/0636920026938/chapter_10/10_delay .html
（对不起，不能发布超过2个链接）

http:// examples.oreilly.com/0636920026938/chapter_10/10_delay.html (sorry, cant post more than 2 links yet)

我的代码错误在哪里？

推荐答案

在此页找到我的问题的解决方案：

Found the solution to my problem on this page:

http://bost.ocks.org/mike/constancy/

通过更改此行：

var rows = rowsGrp.selectAll("g.row").data(jsonData);

到

var rows = rowsGrp.selectAll("g.row").data(jsonData, 
    function(d){ return d.id; });

并移除转换后的储存格更新：

and removing the cell update after the transition:

//update cells
rows.selectAll("g.cell").select("text").text(String);

表现在排序和转换正确。

The table sorts and transitions correctly now.

这篇关于D3.js试图实现sortable svg表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！