爲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