Add HTML legend support

Something like PR and I have asked question but I don’t think if some take a look into closed PR so opened this bug for further discussions.

I strongly feel that HTML legend make more sense and it in-fact make life much easy atleast in the following cases Issue, Issue:

Case-1: huge list of items (see image 1 in our application - summarize data of 300K records since we couldn’t show the complete list we added "Others" to show there more items below )

• Showing them as a vertical list would be impossible because the SVG size may not be enough to fit all of them within the view-able area.
• Even if we manage to show with adjusting gaps etc… it will be nightmare for user to walk through the list to find the particular item in the list.
• Otherwise we must provide the arrow (up/down) to indicate more items are available and this logic would be too complicate and also its too much burden to user to click through the list to find the item of interest.

Case-2: Add advance features:

• Its not easy to implement the search or filter feature in SVG when the list is huge to find the item of interest (see google maps - search by typing address - for example how it will be helpful).
• In many cases it will be convenient to take controls of legends items to enable/disable filter on click of item based on certain condition (ex: if user is Guest / Author) - this just an example.
• Would allow to taking advantage of JS frameworks data binding (Angular 2) and custom template to add meaningful presentation etc…
• Add collapse and expand the legend or add more features like drag to position on the chart.

Case-3: Customize (see the google map image)

• Allow to skin the legend to the application theme (material design!).
• Not everyone JS developer are styling experts, many of the JS developer use the CSS frameworks like bootstrap to develop the website/web-applications and those frameworks doesn’t provide the styling feature for SVG.

[gordonwoodhull]

Thanks for posting these arguments. They are persuasive.

I agree with all of your points except for one.

For the advanced features, I don’t think it will be any easier to take control over the legend click action. You can easily change the click behavior using d3, for example see this answer about toggling composite child charts on legend click.

I also think it would be easy to add collapse/expand functionality with a similar “renderlet”, and maybe you could use d3.behavior.drag for dragging too. But I agree there is a much bigger ecosystem of reusable interactive behaviors on the HTML side than the SVG side.

The quickest way to get this feature into the library is to review @davejlong’s PR (or start your own dc.htmlLegend if for some reason you don’t like it).

If you don’t want to rebase the branch, you should be able to try it out just by copying the content of src/html-legend.js into your local copy of dc.js.

Once you’ve tried it out, please comment on #577 and I’ll reopen it.

Please carefully review the interface of the original legend: http://dc-js.github.io/dc.js/docs/html/dc.legend.html

I think that almost all of these are layout-related and can better be done with CSS, but legendText and maxItems should probably be added to #577 if we go with that.

Would you be willing to start a new PR and add these, along with tests?

[gordonwoodhull]

Implemented in 3.0.0