基于 d3 图的鼠标悬停基于 json 数据集的子集创建/更新 html 表

Question

我正在尝试根据用户选择（鼠标悬停在 d3 图上）创建动态 html 表。到目前为止，我非常幸运，我已经能够修改其他人的代码 sn-ps（主要来自http://jsfiddle.net/U4CGz/7/）以达到这一点。

我找到了其他包含这些片段的链接，但我无法将它们组合成一个工作脚本（由于声誉低，链接未列出）

我的目标..

1. 使用鼠标悬停在 d3 图形上的索引值
2. 使用站点 ID 填充第一列（站点数量并不总是相同）
3. 使用图表中的相同颜色填充第二列与相应的放电值
4. 根据查找填充第三列... StationId : StationName
5. 根据下游预定顺序（非字母顺序）对结果进行排序

部分数据集如下

    var dataset = [{
        'date': '201405221630',
            '10300200': 199,
            '10300000': 239
    }, {
        'date': '201405221645',
            '10300200': 199,
            '10300000': 239
    }, {
        'date': '201405221700',
            '10300200': 197,
            '10300000': 240
    }, ];

mousemove 功能似乎有效，而 updateTable 功能无效

    function mousemove() {
        var x0 = x_main.invert(d3.mouse(this)[0]),
            i = bisectDate(dataset, x0, 1),
            d0 = dataset[i - 1].date,
            d1 = dataset[i].date,
            c = x0 - d0 > d1 - x0 ? [d1, i] : [d0, i - 1];
        //console.log(dataset[i]);
        circles.attr('transform', function (d) {
            return 'translate(' + x_main(c[0]) + ',' + y_main(d.values[c[1]].value) + ')'
        });
        updateTable(c)
    }

    function updateTable(dateIndex) {
        //console.log(dateValue)
        d3.select("#th-date").text("Date: " + dateIndex[0]);
        //console.log(dataset[dateValue[1]])
        //console.log(dataset);
        var tbody = d3.select("discharge-table").append("tbody");
        var rows = tbody.selectAll("tr")
            .data(dataset)
            .enter()
            .append("tr");

        var cells = rows.selectAll("td")
            .data(function (row) {
            return dataset.map(function (d) {
                return {
                    name: d,
                    value: d[name]
                };
            });
        })
            .enter()
            .append("td")
            .text(function (d) {
            return d.value;
        });
    }

我当前状态的代码（在一定程度上有效）位于http://jsfiddle.net/cjustin7/DCCe4/#base

正如您在上面的代码或我的 JSFiddle 中看到的，我什至还没有开始为我的第 4 个和第 5 个目标设置结构。我对 html、css、javascript 和 d3 非常陌生。如果有人指导或向我展示一个工作示例或关于我做错了什么的建议，我将不胜感激。

Answer 1

基本上，updateTable 中执行的数据绑定似乎是不正确的。 rows和cells的初始化方式不对。

编辑我已经更改了建议的代码。以下代码应该为您提供必要的表格输出

在 HTML 中，将以下 tbody 声明添加到 discharge-table 的标记中（在声明 <thead> 之后添加）

<tbody id="discharge-table-body"></tbody>

改写updateTable如下：

function updateTable(dateIndex) {
   d3.select("#th-date").text("Date: " + dateIndex[0]);
   var tbody = d3.select("#discharge-table-body");

   var recordIndex = dateIndex[1]
   var record = dataset[recordIndex] // This is currently selected record in the graph
   var stationDischargeData = getStationDischargeData(record)
   tbody.selectAll(".data-row").remove()
   var rows = tbody.selectAll(".data-row")
    .data(stationDischargeData)
    .enter()
    .append("tr").attr("class", "data-row");

   var cells = rows.selectAll("td")
      .data(function(d) {return [d.station, d.discharge]})
      .enter()
      .append("td")
      .text(function(d) {return d})

}

并添加一个新函数getStationDischargeData如下图

function getStationDischargeData(record) {
   var stationDischargeData = []
   for (f in record) {
     if (f != "date") {
        stationDischargeData.push({station: f, discharge: record[f]})
     }
   }

  return stationDischargeData
}

这些更改应该使您能够使用dataset 中的数据填充表格的前两列

EDIT为了将表中的放电值颜色改为其对应的曲线颜色，将updateTable中初始化cells的部分修改如下：

var cells = rows.selectAll("td")
    .data(function (d) {
        return [d.station, {value: d.discharge, color: colour(d.station)}, d.stationName]
    })
    .enter()
    .append("td")
    .style('color', function (d) {
        if ((typeof d) == "object") {return d.color} else {return 'black'}
    })
    .text(function (d) {
        if ((typeof d) == "object") {return d.value} else {return d}
    })