我正在为我的d3js图表创建一个图例(var legend
)。数据绑定到父'g'元素,特别是我需要在子'text'元素中获得的字符串(标签)。
问题:如何将父数据从'g'元素分配给子文本元素?
代码:
var legend = svg.selectAll(".legend")
.data(color.domain().slice().reverse()) // color is array of strings with length = 6
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(-20," + i * 20 + ")"; });
legend.data(headers).enter().append("text") // headers is array of strings with length = 6
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return this.parentElement.__data__; }); // not working code here
谢谢!完整代码:https://github.com/DeBraid/www.cacheflow.ca/blob/master/styles/js/d3kickchart.js
答案 0 :(得分:1)
你的工作比你完成所有这些手工簿记要困难得多。将相同数据的不同表示结合在一起是D3的强项之一。通常,您希望单个数组中的所有记录尽可能非规范化,而不是尝试手动使用索引和多个列表来关联信息。
在您创建数据记录的line 21上,只需添加一个附加属性来保存范围标签,并将这些范围用作color
轴的域。 (您也可以查看d3的nest运算符...)
您的传奇可以像这样简单(jsfiddle):
var categories = ["foo", "bar", "baz", "qux", "zoo", "yaw"];
var color = d3.scale.ordinal()
.domain(categories)
.range(["#98ABC5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c"]);
d3.select("#legend")
.selectAll("div")
.data(categories)
.enter()
.append("div")
.style("background-color", color)
.text(function(d) { return d });
答案 1 :(得分:0)
编辑:标记正确的答案是要走的路。以下是我一起入侵的糟糕解决方案。
在这里结束了一些非常糟糕的代码,但它确实有效! HT Lars建议添加之前缺少的.select()。
legend.selectAll("text .legend")
.data([headers.slice().reverse()]) // data takes an array (headers), wrapped in [], order reversed
.enter().append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d,i,j) { return d[j]; }); // ** key **
其中'j'是包含当前元素的组的索引。因此,不需要使用this.parentNode。数据等,因为我们可以使用上述方法访问父'g'。不是100%肯定这个的机制,但它的工作原理!如果你有更清洁的方法,请随意详细说明这种方法。