How to disable some streams by default in a nvd3 Simple Line Chart?

问题

I have several lines and I know that clicking on the "dot" in the legend will hide/show it.

However, I need to start with some of the lines being disabled and not displayed, and the user will have to click on the dot in the legend to show it on the graph.

(eg. I graph the number of questions on stackoverflow per language, but with C, PHP and javascript disabled by default). the graph only shows python, ruby... but on the legend, you have all the languages, including C, PHP and js with these 3 being disabled.

I haven't found a method/attribute for each data serie to set the default show/hide status. Am I missing something?

回答1:

For each of your data series that you want disabled, just do:

series.disabled=true

nvd3 does not do everything, but if you are willing to peruse the code it is actually quite flexible. I discovered this by finding this line in the source of several of the chart models:

state.disabled = data.map(function(d) { return !!d.disabled });

回答2:

After reading this answer I still had to do some more reading in order for me to understand how to set a stream disabled from my JSON data-stream for the graphs.

The example below is what solved it for me disabled: true

    {
    key: "something",
    disabled: true,
    values: [...]
    }

回答3:

You can change which streams are enabled/disabled by using the chart.state() object. For example:

// Assuming your chart is called 'chart'
var state = chart.state();

for(var i=0; i < state.disabled.length; i++) {
  state.disabled[i] = ...LOGIC RETURNING TRUE OR FALSE...;
}

chart.dispatch.changeState(state);
chart.update();

回答4:

You could start out with a hidden chart and try something like this:

// Array of series you want to hide
var hidden = [0, 2];

// Dispatch click event to each element
var e = document.createEvent('UIEvents');
e.initUIEvent('click', true, true);
d3.select('.nv-legend')
  .selectAll('.nv-series')
  .filter(function(d, i){return hidden.indexOf(i) !== -1;})
  .node()
  .dispatchEvent(e);

Once this finishes, unhide your chart and the series will be disabled.

来源：https://stackoverflow.com/questions/16962375/how-to-disable-some-streams-by-default-in-a-nvd3-simple-line-chart

标签

javascript

d3.js

nvd3.js