1

我有一个数据变量，其中包含以下内容：

  [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。还有另一种方法吗？

4

1 回答 1

1

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

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

var legend = svg.selectAll(".legend")
  .data(words)
// The rest stays the same
于 2012-11-15T20:09:57.010 回答