Hi @augustindelaf,
Lately I am always creating legend myself: tried the legend of the chartutils, but found it to complicated/to little control.
How I do it:
1. part of the method to convert the dataView data to your internal data structure store the legend values seperatly
2. in the init method add an SVG g container/placeholder and store in in a private variable
this.legend = this.svg.append("g").classed("legend", true);
3. use d3 functionallity to create the legend based on the data structure of step 1 and allign all the legend labels not to overlap each other, see the .each(function () {}) part
this.legend
.selectAll(".legendItem")
.data(legendNodes)
.join(enter => enter
.append("g")
.classed("legendItem", true)
.each(function (d) {
select(this)
.append("circle")
.classed("legendMarker", true)
.attr("r", 5)
.style("fill", d.data.color)
select(this)
.append("text")
.classed("legendText", true)
.attr("x", 7.5)
.attr("y", 4)
.style("alignment-baseline", "baseline")
.text(d.data.label.value)
})
.each(function () {
let size = (<SVGGElement>this).getBoundingClientRect();
select(this)
.attr("transform", `translate(${moveX} 0)`)
moveX += size.width + 5;
}),
update => update
.each(function (d) {
select(this)
.selectAll(".legendMarker")
.style("fill", d.data.color)
select(this)
.selectAll(".legendText")
.text(d.data.label.value)
})
.each(function (d) {
let size = (<SVGGElement>this).getBoundingClientRect();
select(this)
.attr("transform", `translate(${moveX} 0)')
moveX += size.width + 5;
}),
exit => exit
.remove()
);
4. Positioning of the legend you can do via the legend container including the visibility if needed
Feel free to see if this is working for you.
-JP
