D3：选择行时从字典填充表答案

【问题标题】：D3: Populate Table from Dict when Line SelectedD3：选择行时从字典填充表
【发布时间】：2017-10-26 12:02:27
【问题描述】：

我有一个为我的 d3 折线图创建的嵌套字典。当我将鼠标悬停在图表中的某些行上时，我试图用字典数据填充表格。到目前为止，当我将鼠标悬停在行上时，我已经能够填充 Site 列。

HTML：

<table>
  <tr>
    <th>Site</th>
    <th>Model</th>
    <th>Priority</th>
  </tr>
  <tr>
    <td id = "id1"></td>
    <td id = "id2"></td>
    <td id = "id3"></td>
  </tr>
</table>

JavaScript：

function mouseover(d) {
    var info = {"A" : {"model":"100", "priority":"Important"},
                "B" : {"model":"60", "priority":"Not Important"},
                "C" : {"model":"80", "priority":"Important"},
                "D" : {"model":"80", "priority":"Not Important"},
                "E" : {"model":"60", "priority":"Important"}
           }
    d3.select("#id1").text(d.data.site);   // works

}

当鼠标悬停在"B" 行上时，表格中预期的输出如下所示：

Site   Model     Priority
 B      60     Not Important

【问题讨论】：

标签： javascript dictionary d3.js

【解决方案1】：

我刚刚想通了。我为我的帖子道歉...

如果有人想知道如何做到这一点：

function mouseover(d) {
    var info = {"A" : {"model":"100", "priority":"Important"},
                "B" : {"model":"60", "priority":"Not Important"},
                "C" : {"model":"80", "priority":"Important"},
                "D" : {"model":"80", "priority":"Not Important"},
                "E" : {"model":"60", "priority":"Important"}
           }
    d3.select("#id1").text(d.data.site);
    d3.select("#id2").text(info[d.data.site]["model"]);
    d3.select("#id3").text(info[d.data.site]["priority"]);
}

【讨论】：