我正在使用D3.js渲染表。 初始渲染根据一个键对数据进行排序。 我不知道在哪里可以拦截排序并将其绑定到列标题上的click事件。

呈现表的工作代码如下:

d3.csv("ranks.csv", function(error, data) {
    if (error) throw error;


    //sort the data by overall ranking
    data = data.sort(function(a, b) {
      return +a.touchdowns_rank - +b.touchdowns_rank;
    });

    render(data);
  });

  // RENDER TABLE
  function render(data) {
    // append the rows
    var tr = d3
      .select("tbody")
      .selectAll("tr")
      .data(data)
      .enter()
      .append("tr");

    // for each column append a th

    tr.append("th").html(function(d) {
      console.log(d);
      first_column = `<img class="teamlogo" src="Arizona.gif" alt="Arizona" />
            <span class="city-name">${d.City}</span><br />
            <span class="team-name">${d.team}</span>
          </th>`;
      return first_column;
    });

    tr.append("th")
      .text(function(d) {
        console.log(d);
        return d.touchdowns_rank;
      });

    tr.append("th")
      .text(function(d) {
        console.log(d);
        return d.ticket_rank;
      });

    tr.append("th")
      .text(function(d) {
        console.log(d);
        return d.precipitation_rank;
      })
      .style("background-color", d => cellColor(d.precipitation_rank))
      .style("font-size", 0);

    tr.append("th")
      .text(function(d) {
        console.log(d);
        return d.beer_rank;
      });

  }

  ask by freethrow translate from so

本文未有回复,本站智能推荐:

1回复

在D3.js中对大型CSV排序

我正在尝试使用D3.js对中等大小的CSV文件(约3000行)进行排序,然后再将其传递给可视化算法。 显然,我的代码有问题,因为排序似乎是在“块”中进行的-请参见上图。 我正在使用此d3函数: 这是代码: 可以在以下位置找到CSV文件: https : //www.dropbox.
1回复

我要如何在d3.js中更改光标?

这是与js处理完成时的基本Javascript加载消息有关的问题 我的主要问题是,在调用我的两个函数drawlegend()和display()之前,不会更改光标,而在一切完成后才更改。 使用下面的代码,其中光标的恢复临时被注释掉了,我得到了沙漏,但是在一切完成之后。 在调用慢速功能之
1回复

d3.js堆叠条形图排序/更改堆栈中各个值的顺序

在我之前的问题中: d3.js 堆积条形图 - 修改堆栈顺序逻辑我了解到 d3 没有现成的解决方案来按堆栈中的单个值进行排序。 D3 的stack.order()只能对整个系列进行排序。 我还了解到我需要编写一个自定义函数来实现这一点。 在我进入这个函数之前,让我解释一下这里的动机。 我想在汇总总
1回复

d3.js中的数据绑定

注意:对于javascript和d3.js(昨天开始),我是一个全新的人,如果我忽略了明显的内容,我深表歉意。 我在理解d3如何处理数据以及数据绑定如何工作方面遇到问题。 我试图重新创建此热图 ,不同之处在于我的起始表应包括标签而不是索引。 (数据来自数据库请求)。 我知道d3.js
1回复

绑定d3.js中的数据

在此代码中: http : //bl.ocks.org/mbostock/3886208 第三个(数据)的功能是什么
1回复

合并d3.js中的数据

我是Pythonista,并试图学习d3.js(微笑)。 我有一个带套接字的服务器。 我的页面订阅了它。 服务器以JSON '[["id0", 0.38], ["id1", 0.70], ["id8", 0.71]]'发送更新。 我写了以下简单的页面: 它工作正常! WS接收数据
1回复

D3.js中的数据输入和多次转换

我已经使用d3.js在单个svg中绘制了多个形状。 就像这样: 我知道这可能不是最好的方法,但是效果很好。 现在,我想向其中添加一些转换。 我也有data[1] ,我想要持续5秒钟从data[0]绘制图形,然后过渡到data[1] 。 data[0]和data[1]具有相同的格式,并
1回复

在D3.js中透视数据

我对 D3 很陌生,仍在学习。 我有以下布局的数据 并想转换为 我怎样才能使用 D3.js 做到这一点? 谢谢你的帮助!