javascript - 拟合 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