【发布时间】：2019-04-03 20:58:28
【问题描述】：
我是 D3 领域的新手，根据“Web 的交互式数据可视化”一书，我设法创建了一个条形图，该条形图主要基于以下 link. 中的代码
问题是我无法根据对象动态地将图例添加到我的条形图中。
我曾尝试咨询与“向条形图添加图例”相关的 youtube 视频和其他 stackoverflow 问题，但在我看来，我找不到有关如何从对象数组中检索键的问题并使用数据作为图例添加到条形图中。 现在我所有的条也有相同的颜色，见下面的第二个代码。
请参阅下面的代码，了解嵌入在数组中的对象的格式。 名称“key”和“value”是固定的，而对象的数量及其对应的名称和值在用户单击事件后（这决定了对象中将包含哪些变量）有所不同。
以下example 能够创建图例，但是在这种情况下，对象的格式与我的情况有所不同，而且我目前对 D3 的了解有限，所以我不知道我必须通过哪些方式修改代码。
2: {key: "bedrijfsvestigingen_Sbi2008_BedrijfsvestigingenTotaal", value: 490}
3: {key: "bedrijfsvestigingen_Sbi2008_BedrijfsvestigingenNaarActiviteit_M_nZakelijkeDienstverlening", value: 165}
4: {key: "bedrijfsvestigingen_Sbi2008_BedrijfsvestigingenNaarActiviteit_R_uCultuur_Recreatie_OverigeDiensten", value: 120}
5: {key: "bedrijfsvestigingen_Sbi2008_BedrijfsvestigingenNaarActiviteit_K_lFinancieleDiensten_OnroerendGoed", value: 15}
6: {key: "bedrijfsvestigingen_Sbi2008_BedrijfsvestigingenNaarActiviteit_ALandbouw_BosbouwEnVisserij", value: 0}
7: {key: "bedrijfsvestigingen_Sbi2008_BedrijfsvestigingenNaarActiviteit_H_p_JVervoer_InformatieEnCommunicatie", value: 85}];
基于书中的代码并考虑其他变量，我目前有以下用于可视化条形图的代码，其中值（见上面的对象）显示在条形图中，条形图的颜色是都是蓝色的。但是，我当前的代码中还没有包含图例。因此，我想知道如何能够根据对象中的“键”（在我的情况下）动态创建一个图例，并表示绑定到条形的相应颜色。我想达到我画草图的最低图像。
var svg = d3.select("#barchart")
.select("svg")
.remove("svg");
//Width and height
var w = 600;
var h = 250;
var padding=20;
var xScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.rangeRound([w - padding,padding ])
.paddingInner(0.05);
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, function (d) {
return d.value;
})])
.range([padding,h - padding]);
console.log("yscale",yScale);
//Define key function, to be used when binding data
var key = function (d) {
console.log("key", d);
return d.key;
};
// d3.select("svg").remove();
//Create SVG element
var svg = d3.select("#barchart")
.append("svg")
.attr("width", w)
.attr("height", h);
console.log("svg", svg);
//Create bars
svg.selectAll("rect")
.data(dataset, key) //Bind data with custom key function
.enter()
.append("rect")
.attr("x", function (d, i) {
return xScale(i);
})
.attr("y", function (d) {
return h - yScale(d.value);
})
.attr("width", xScale.bandwidth())
.attr("height", function (d) {
return yScale(d.value);
})
// .attr("data-legend", function (d) { return d.key })
.attr("fill", function (d) {
return "rgb(0, 0, " + (d.value * 10) + ")";
});
//Create labels
svg.selectAll("text")
.data(dataset, key) //Bind data with custom key function
.enter()
.append("text")
.text(function (d) {
return d.value;
})
.attr("text-anchor", "middle")
.attr("x", function (d, i) {
return xScale(i) + xScale.bandwidth() / 2;
})
.attr("y", function (d) {
return h - yScale(d.value) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
【问题讨论】：
-
你能举例说明你想要达到的结果吗？
-
@torresomar，我在第一篇文章中包含了我想要实现的粗略想法。