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函数以显示我的数据中设置的“word”？我不确定他们是如何使用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

拟合D3图形的数据以创建图例

1 个答案: