Question

我正在使用D3js的简单仪表板示例 http://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

感谢。

非常感谢任何帮助。

Answer 1

使用以下代码更新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;
}

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

1 个答案: