js简单的仪表板示例-如何编辑显示表

D3.js simple dashboard example - How can I edit display table

本文关键字：编辑 显示 何编辑 简单 仪表板 js      更新时间：2023-09-26

我使用简单的仪表板例子从D3jshttp://bl.ocks.org/NPashaP/96447623ef4d342ee09b

图形显示如下(我希望这个表显示为我在末尾所示):

low  21,027 46%
mid  14,830 33%
high 9,364  21%

我使用与脚本内相同的数据集，即- 

<script>
var freqData=[
{State:'AL',freq:{low:4786, mid:1319, high:249}}
,{State:'AZ',freq:{low:1101, mid:412, high:674}}
,{State:'CT',freq:{low:932, mid:2149, high:418}}
,{State:'DE',freq:{low:832, mid:1152, high:1862}}
,{State:'FL',freq:{low:4481, mid:3304, high:948}}
,{State:'GA',freq:{low:1619, mid:167, high:1063}}
,{State:'IA',freq:{low:1819, mid:247, high:1203}}
,{State:'IL',freq:{low:4498, mid:3852, high:942}}
,{State:'IN',freq:{low:797, mid:1849, high:1534}}
,{State:'KS',freq:{low:162, mid:379, high:471}}
];

如何显示如下内容:

State   Low     mid    high
AL      4786    1319   249
AZ      1101    412    674
..
KS      162     379    471

谢谢。

用下面的代码更新legend函数将得到您想要的行(没有格式，标题等)。希望这足以让你入门。还要注意，您必须将freqData(而不是tF)传递给legend函数，以使该表以最小值呈现。最后，请注意，这与饼图和直方图无关。查看此处的JSFiddle获取最小值:https://jsfiddle.net/5v6ob9uf/

// function to handle legend.
function legend(lD){
    var leg = {};
    // create table for legend.
    var legend = d3.select(id).append("table").attr('class','legend');
    // create one row per segment.
    var tr = legend.append("tbody").selectAll("tr").data(lD).enter().append("tr");
    tr.append("td").text(function(d){return d.State});
    tr.append("td").text(function(d){return d.freq.low});
    tr.append("td").text(function(d){return d.freq.mid});
    tr.append("td").text(function(d){return d.freq.high});        
    return leg;
}
相关文章：