为D3图形拟合数据，以创建图例

Question

我有包含以下数据变量：

[Object { score="2.8", word="Blue"}, Object { score="2.8", word="Red"}, Object { score="3.9", word="Green"}] 

我感兴趣的修改一块D3图表http://bl.ocks.org/3887051的显示图例，这将是我的数据集中的“单词”列表。

传奇脚本看起来像这样（从上面的链接）：

var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; }); 

var legend = svg.selectAll(".legend") 
    .data(ageNames.slice().reverse()) 
.enter().append("g") 
    .attr("class", "legend") 
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); 

legend.append("rect") 
    .attr("x", width - 18) 
    .attr("width", 18) 
    .attr("height", 18) 
    .style("fill", color); 

legend.append("text") 
    .attr("x", width - 24) 
    .attr("y", 9) 
    .attr("dy", ".35em") 
    .style("text-anchor", "end") 
    .text(function(d) { return d; }); 

如何修改自己的ageNames函数来显示“单词”从我的数据集？我不确定他们如何利用d3.keys。还有另一种方法可以做到吗？

Answer 1

这应该或多或少地工作，但您可能需要reverse()（如原始示例所示）或以其他方式重新排列words的元素，以便将单词正确映射到正确的颜色。取决于你如何实现你的图。

var words = yourDataArray.map(function(entry) { return entry.word; }); 

var legend = svg.selectAll(".legend") 
    .data(words) 
// The rest stays the same