D3:选择行时从字典填充表



我有一个为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

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

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

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

最新更新