d3 legend does not work with d3 v3

[Stophface]

I am using this version of d3 https://d3js.org/d3.v3.min.js. Which version from cdnjs is the one that is usable with the suggested d3 version? When I use that one https://cdnjs.com/libraries/d3-legend and I try d3.legend.color() it says that this is not defined. Looking into the code, its d3.legendColor(). When I go onto this site http://d3-legend-v3.susielu.com/ and then click "Include file directly - All legends" I get directed to this URL https://raw.githubusercontent.com/susielu/d3-legend/master/d3-legend.min.js which again has d3.legendColor() in it...

Its rather frustrating...

[susielu]

As it says on the documentation, if you're using v3 of d3 you should be using v1 of d3-legend, here it is on cdn: https://cdnjs.com/libraries/d3-legend/1.13.0
Here are the docs for that version: http://d3-legend-v3.susielu.com/

Let me know if you have any problems.

[susielu]

Ah I understand your confusion, the cdn links aren't going to v1 I'll update that now.

[Stophface]

@susielu
Yep. That was the problem. And I did not find the hint where it says that its v1!

However, including the file you pointed out gives me this error
a.getBBox is not a function at https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.13.0/d3-legend.min.js:1:1001 at Array.map (native) at Array.a (https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.13.0/d3-legend.min.js:1:976) at Array.Co.call (https://d3js.org/d3.v3.min.js:3:15178) at drawWeltweit (http://127.0.0.1:7555/js/gui_eingrenzung/selfwritten/ausfaelle_weltweit.js:409:10) at http://127.0.0.1:7555/js/gui_eingrenzung/selfwritten/ausfaelle_weltweit.js:134:21 at Object.<anonymous> (https://d3js.org/d3.v3.min.js:1:11277) at Object.t (https://d3js.org/d3.v3.min.js:1:1565) at XMLHttpRequest.i (https://d3js.org/d3.v3.min.js:1:10137)
while having this code

var lc= d3.select("#legend")

var colorLegend = d3.legend.color()
    .labelFormat(d3.format(".0f"))
    .scale(colorScale)
    .shapePadding(5)
    .shapeWidth(50)
    .shapeHeight(20)
    .labelOffset(12);

lc.append("g")
    .attr("transform", "translate(352, 60)")
    .call(colorLegend);

[susielu]

Hmm I just put together a working example, does this help at all?
https://jsfiddle.net/erg3npjt/1/

[susielu]

It seems like something is going wrong with the selection you're passing to the function.

[Stophface]

@susielu
Ah, it needs to be a svg, not a div :)