Javascript 使用d3.js创建图例

我觉得我在这里效率很低。我试图从一个数组中创建一个传奇，但似乎我写得太多了。有人能告诉我它是否可以优化吗

编辑：

---

另一件让我烦恼的事。我的造型似乎因为某种原因都很大胆。我还没有定义任何样式。这是默认行为吗

首先，将所有测量值和值移动到文件的顶部并引用它们（这只会使内容更具可读性）

您不需要创建

g

元素。只需使用

x，y

属性而不是平移来定位矩形和文本：

.attr("y", function(d,i){return legend_row_height * i;})

并将样式转换为CSS。通过在对象上设置类，最容易实现这一点：

.classed("squares", 1)

然后添加CSS：

.squares {
   stroke: white;
}

---

首先，将所有度量值和值移到文件的顶部并引用它们（这只会使内容更具可读性）

您不需要创建

g

元素。只需使用

x，y

属性而不是平移来定位矩形和文本：

.attr("y", function(d,i){return legend_row_height * i;})

并将样式转换为CSS。通过在对象上设置类，最容易实现这一点：

.classed("squares", 1)

然后添加CSS：

.squares {
   stroke: white;
}

---

@MatthewWilcoxson的答案很好，但这里有一个更具体的d3重写。基本上，不要双重绑定数据，保留

g

，在其上绑定，定位并将

rect

和

文本添加到其中：



风险值数据=[{
名称：“另一长”
}, {
名称：“BigData”
}, {
名字：“什么”
}, {
名字：“某物”
}, {
名称：“Smalls”
}];
var保证金={
前10名，
右:10,，
底部：10，
左：10
};
var color=d3.scale.category20c（），
cellDim=19；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，400-margin.left-margin.right）
.attr（“高度”，1000-边距。顶部-边距。底部）；
var g=svg.selectAll（“.row”）
.数据（数据）
.enter（）.append（“svg:g”）
.attr（“转换”，函数（d，i）{
返回“translate（“+（0）+”，“+（（cellDim+1）*i）+”）
});
g、 追加（“svg:rect”）
.attr（“宽度”，单元格尺寸）
.attr（“高度”，单元格尺寸）
.样式（“填充”，功能（d，i）{
返回颜色（i）；
});
g、 附加（“文本”）
.attr（“dy”、“1em”）
.attr（“dx”，单元格尺寸+2）
.文本（功能（d）{
返回d.name；
});
@MatthewWilcoxson的答案很好，但这里有一个更具体的d3重写。基本上，不要双重绑定数据，保留
g
，在其上绑定，定位并将
rect
和
文本添加到其中：



风险值数据=[{
名称：“另一长”
}, {
名称：“BigData”
}, {
名字：“什么”
}, {
名字：“某物”
}, {
名称：“Smalls”
}];
var保证金={
前10名，
右:10,，
底部：10，
左：10
};
var color=d3.scale.category20c（），
cellDim=19；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，400-margin.left-margin.right）
.attr（“高度”，1000-边距。顶部-边距。底部）；
var g=svg.selectAll（“.row”）
.数据（数据）
.enter（）.append（“svg:g”）
.attr（“转换”，函数（d，i）{
返回“translate（“+（0）+”，“+（（cellDim+1）*i）+”）
});
g、 追加（“svg:rect”）
.attr（“宽度”，单元格尺寸）
.attr（“高度”，单元格尺寸）
.样式（“填充”，功能（d，i）{
返回颜色（i）；
});
g、 附加（“文本”）
.attr（“dy”、“1em”）
.attr（“dx”，单元格尺寸+2）
.文本（功能（d）{
返回d.name；
});
的确，先生，你说得对。我摆脱了
g
创建，并按照您的建议使用了
attr（“y”）
。此外，删除
g
块似乎已经修复了“粗体”效果。事实上，先生，您在所有方面都是正确的。我摆脱了
g
创建，并按照您的建议使用了
attr（“y”）
。另外，删除
g
块似乎已经修复了“粗体”效果。是的，你的答案在我看来更好a看起来更像我一直在用d3做的事情。非常感谢。是的，你的答案对我来说似乎更好a看起来更像我一直在和d3一起工作的东西。非常感谢。