Hide lineChart by clicking on legend

45 views
Skip to first unread message

Lucas Viani

unread,
Sep 29, 2022, 3:43:49 AM9/29/22
to dc-js user group
I have a composite chart with many lineCharts, and would like to hide the lines as I click on its symbol/name in the legend.

Is it possible?

Gordon Woodhull

unread,
Sep 29, 2022, 9:48:24 AM9/29/22
to dc.js user group
Hi Lucas,

It's not built-in but can be added with a little code.

Please see this answer on SO:

Cheers,
Gordon


On Sep 29, 2022, at 3:43 AM, Lucas Viani <lucas...@gmail.com> wrote:

I have a composite chart with many lineCharts, and would like to hide the lines as I click on its symbol/name in the legend.

Is it possible?

--
You received this message because you are subscribed to the Google Groups "dc-js user group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-user-gro...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/9a885ac3-e847-46f5-a297-ca40d28b8c9an%40googlegroups.com.

Lucas Viani

unread,
Sep 30, 2022, 3:06:39 AM9/30/22
to dc-js user group
Thank you for the tip!

I am trying to implement the code, but seems that it is valid for an older version of dc.js.

From what I could see, on the section of the code below, we need the id of the subchart (0,1,2,3) in order to select the g.sub_0, g.sub_1, etc.

chart.selectAll('g.dc-legend .dc-legend-item')    
      .on('click.hideshow', function(d, i) {        
        var subchart = chart.select('g.sub._' + i);

When I click, what I get as <i> is:
  1. {chart: LineChart, name: 'curve1', hidden: false, color: '#dd220e'}
    1. chart: LineChart {__dcFlag__: 177, _svgDescription: null, _keyboardAccessible: false, _dimension: {…}, _group: {…}, …}
    2. color: "#dd220e"
    3. hidden: false
    4. name: "curve1"
    5. [[Prototype]]: Object

I couldnt find a way to obtain the id of the chart in order to acces the subchart properly.
Is there a different way of doing so in the current version of dc.js?

Lucas Viani

unread,
Sep 30, 2022, 7:44:17 AM9/30/22
to dc-js user group
Would this solution work with HtmlLegend?

Gordon Woodhull

unread,
Sep 30, 2022, 8:57:41 AM9/30/22
to dc.js user group
Hi Lucas,

This is a good point: d3@6, used in dc 4+ by default although it is still compatible with d3@5, changed the signature for callback functions. Instead of taking (datum, i, elements), callbacks now take (event, datum). The target element of the event is passed as this or can be retrieved from event.currentTarget; i and elements need to be found other ways.

Please take a look at their documentation for the change:

It looks like some of those tricks won't work, and you might have to look at the element in this.

We probably could document this better, but it's tough documenting the changes of underlying libraries.I think you would get the same results with HtmlLegend.

Sorry for any inaccuracies; I have been away from dc.js for a while.

Cheers,
Gordon


On Sep 30, 2022, at 7:45 AM, Lucas Viani <lucas...@gmail.com> wrote:

Would this solution work with HtmlLegend?

Lucas Viani

unread,
Oct 3, 2022, 5:38:24 AM10/3/22
to dc-js user group
Thank you Gordon!

At the end what I am doing is to search the name of the chart in the local Array storing the legends texts.
This provides me the id to use.
It is not beautiful, but it works fine.

When I try to use this solution with HTMLlegend, I get the error below:
"composite should not be getting legendToggle itself"

Dont know what to do with it.
Any suggestions?

Thank you again for you time!

Gordon Woodhull

unread,
Oct 3, 2022, 6:45:56 AM10/3/22
to dc-js-us...@googlegroups.com
Hi Lucas,

Yes that seems like a reasonable solution given that D3 took away the index parameter. Notice that their example also involves a search (through the selection). There may also be useful info in the datum sometimes

Sorry, I don’t know the answer to the HTML legend bug you’re facing.

The legend system is one of the least developed parts of dc.js, sort of an afterthought.

It’s a simple system and all cases have not been fully developed. I’m surprised that the HTML legend works differently from the regular legend, given that the former was based on the latter… but not all that surprised.

It’s not very much code. I bet if you look at the source, a fix or workaround will be apparent.

Cheers,
Gordon


On Oct 3, 2022, at 5:39 AM, Lucas Viani <lucas...@gmail.com> wrote:



Lucas Viani

unread,
Oct 4, 2022, 8:19:41 AM10/4/22
to dc-js user group
Hi Gordon,

At the end, since the trick doesnt work for HTML legends, I changed the code to add this feature.
It was my first time diving into the dc.js code, and it is well organized. I could follow everything easily.

I added a feature to start the plot with some lines hidden, and then using the legend the user can make it visible and hide it again.

I dont know if you would like to have the code, or if it would be interesting to post somewhere so other people can generalize this feature.
Right now it works for LineChart and BarChart.

Thank you again for the help.

Gordon Woodhull

unread,
Oct 4, 2022, 8:40:30 AM10/4/22
to dc-js-us...@googlegroups.com
Hi Lucas,

That’s great. Thanks for the follow up.

We are currently looking for new maintainers for dc.js, so I can’t guarantee that a PR will be reviewed and merged quickly, but you are welcome to contribute!

Cheers,
Gordon


On Oct 4, 2022, at 8:20 AM, Lucas Viani <lucas...@gmail.com> wrote:



Lucas Viani

unread,
Oct 27, 2022, 2:14:55 AM10/27/22
to dc-js user group
Hi Gordon,

I would like to upload a branch with this changes and eventually do a PR.
I currently don´t have permission to upload to the repo.

What should I do to get the permission?

Gordon Woodhull

unread,
Oct 27, 2022, 3:02:24 AM10/27/22
to dc.js user group
Hi Lucas,

You should fork the repo, push the changes to a new branch on your fork, and do a pull request.

That doesn't require any permissions from us.

One of the dc.js maintainers will review your PR and merge it. (We are currently changing maintainers, so this may take a little while - bear with us.)

Cheers,
Gordon


Reply all
Reply to author
Forward
0 new messages