dimplejs - Toggling the display of a series selectively

问题

To the Word-Awesomeness example in dimplejs documentation, I have added 2 series with dimple.plot.bar and dimple.plot.line plotFunctions as shown below:

Chart with 2 series:

<head>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://dimplejs.org/dist/dimple.v2.1.0.min.js"></script>
</head>
<body>
   <script type="text/javascript">
     var svg = dimple.newSvg("body", 800, 600);
     var data = [
       { "Word":"Hello", "Awesomeness":2000 },
       { "Word":"World", "Awesomeness":3000 }
     ];
     var chart = new dimple.chart(svg, data);
     chart.addCategoryAxis("x", "Word");
     chart.addMeasureAxis("y", "Awesomeness");
     chart.addSeries(null, dimple.plot.bar);
     chart.addSeries(null, dimple.plot.line);
     chart.draw();
   </script>
</body>

This displays the chart with both line and bar. I would like to hide/show the line and bar based on user selection. I tried removing a series using chart.series.splice (0,1) and redrawing. That did not work. The chart always shows both bar and line series.

However, the documentation of dimple.chart.series states that:

This collection is provided for viewing series which have been added with the addSeries method. However it may be modified directly to remove or move a series.

Example:
// Add three series and remove the middle one using a standard JavaScript array operation
myChart.addSeries("Brand", dimple.plot.bar);
myChart.addSeries("Brand", dimple.plot.bubble);
myChart.addSeries("Brand", dimple.plot.line);
myChart.series.splice(1, 1);

Please let me know how to hide/show a series selectively in dimplejs. Thanks.

回答1:

The chart.draw code doesn't remove old series from the chart, splicing out the series will just prevent it from being updated the next time you call draw. You'll have to manually remove the elements from the chart :

  myChart.addSeries("Brand", dimple.plot.bar);
  myChart.addSeries("Brand", dimple.plot.bubble);
  myChart.addSeries("Brand", dimple.plot.line);
  chart.series[1].shapes.remove();
  chart.series.splice(1, 1);

Here are some other options for toggling series :

http://jsbin.com/sacaze/3/edit?css,js,output
- Add and remove the series each time. The loop to find the series can vary depending on how you're generating the series, it could just look for a specific combination of dimple.series.plot and dimple.series.categoryFields.
http://jsbin.com/sacaze/4/edit?html,js,output
- Use the same logic to find the series, but just hide/show the shapes instead of removing the series. For toggling this is probably the approach I'd use.

To find the series you could also add a custom key to each series object :

var mySeries = chart.addSeries('category', dimple.plot.bar);
mySeries.my_custom_key = 'barSeries';

//somewhere else...
var barSeries = _.find(chart.series, function(series){ return series.my_custom_key === 'barSeries' });

Just make sure it doesn't conflict with a key on dimple.series : https://github.com/PMSI-AlignAlytics/dimple/blob/master/src/objects/series/begin.js

来源：https://stackoverflow.com/questions/26944123/dimplejs-toggling-the-display-of-a-series-selectively

标签

dimple.js