Question

对于dimplejs文档中的Word-Awesomeness示例，我添加了2个系列dimple.plot.bar和dimple.plot.line plotFunctions，如下所示：

有2个系列的图表：

<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>

这会显示包含直线和条形图的图表。我想根据用户选择隐藏/显示线条和条形。我尝试使用chart.series.splice (0,1)删除系列并重新绘制。那没用。图表始终显示条形和线条系列。

但是，dimple.chart.series的文档指出：

此集合用于查看已使用addSeries方法添加的系列。但是，可以直接修改它以删除或移动一系列。

示例：
// 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);

请让我知道如何在dimplejs中有选择地隐藏/显示系列。感谢。

Answer 1

chart.draw代码无法从图表中删除旧系列，拼接系列只会阻止下次调用绘图时更新系列。您必须手动删除图表中的元素：

  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);

以下是切换系列的其他一些选项：

http://jsbin.com/sacaze/3/edit?css,js,output
- 每次添加和删除系列。查找系列的循环可能会有所不同，具体取决于您如何生成系列，它可能只是寻找dimple.series.plot和dimple.series.categoryFields的特定组合。
http://jsbin.com/sacaze/4/edit?html,js,output
- 使用相同的逻辑查找系列，但只是隐藏/显示形状而不是删除系列。对于切换，这可能是我使用的方法。

要查找系列，您还可以为每个系列对象添加自定义键：

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' });

请确保它与dimple.series上的密钥不冲突：https://github.com/PMSI-AlignAlytics/dimple/blob/master/src/objects/series/begin.js

dimplejs - 有选择地切换系列的显示

1 个答案: