Question

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

我找到了其他链接，但我无法将它们整合到一个工作脚本中（由于声誉不佳而未列出的链接）

我的目标......

使用鼠标悬停在d3图形上的索引值
使用电台ID填充第一列（并不总是相同的电台数）
使用图中的相同颜色
根据查询填充第三列... StationId：StationName
基于下游预定顺序（非字母顺序）对结果进行排序

    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

中的数据填充表格的前两列

编辑为了将表格中的放电值更改为与其对应的图表线的颜色，请更改在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}
    })

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

1 个答案: