如何过滤 d3js/dimplejs 图表中的系列？答案

【问题标题】：How to filter series in d3js/dimplejs charts?如何过滤 d3js/dimplejs 图表中的系列？
【发布时间】：2015-02-27 13:54:27
【问题描述】：

我想将 d3js/dimplejs 图表制作为响应式/交互式图表。我想根据“传奇”中的点击过滤“系列”。我尝试如下。但这并没有像我预期的那样隐藏“系列”。这对“气泡”图很有魅力。

    var svg = dimple.newSvg("#chartContainer", 700, 450);
    data = [
   {
    "Standby Date":"01-DEC-2013 00:00:00",
    "Value type":"Actual",
    "Value":118,
            "Code":"code1"
  },
  {
    "Standby Date":"01-DEC-2013 00:00:00",
    "Value type":"Planned",
    "Value":74,
            "Code":"code1"
  },
  {
    "Standby Date":"02-DEC-2013 00:00:00",
    "Value type":"Actual",
    "Value":128,
            "Code":"code2"
  },
  {
    "Standby Date":"02-DEC-2013 00:00:00",
    "Value type":"Planned",
    "Value":157,
            "Code":"code2"
  },
  {
    "Standby Date":"03-DEC-2013 00:00:00",
    "Value type":"Actual",
    "Value":142,
            "Code":"code3"
  },
  {
    "Standby Date":"03-DEC-2013 00:00:00",
    "Value type":"Planned",
    "Value":154,
            "Code":"code3"
  }
];
    var myChart = new dimple.chart(svg, data);
    myChart.setBounds(70, 40, 490, 320)   
    var x = myChart.addTimeAxis("x", "Standby Date", "%d-%b-%Y %H:%M:%S", "%d-%b");
            var y = myChart.addMeasureAxis("y","Value");
    var s = myChart.addSeries("Value type", dimple.plot.area);
    s.lineMarkers = true;
    var myLegend = myChart.addLegend(180, 10, 360, 20, "right");
    myChart.draw();       
            myChart.legends = [];
            var filterValues = dimple.getUniqueValues(data, "Value type");
        myLegend.shapes.selectAll("rect")
          .on("click", function (e) {
            var hide = false;
            var newFilters = [];
            filterValues.forEach(function (f) {
              if (f === e.aggField.slice(-1)[0]) {
                hide = true;
              } else {
                newFilters.push(f);
              }
            });
            if (hide) {
              d3.select(this).style("opacity", 0.2);
            } else {
              newFilters.push(e.aggField.slice(-1)[0]);
              d3.select(this).style("opacity", 0.8);
            }
            filterValues = newFilters;
            myChart.data = dimple.filterData(data, "Value type", filterValues);
            myChart.draw(800);
           });

我还想用“代码”过滤图表。传奇可以通过吗？还是有其他可能的方式？

【问题讨论】：

嗨桑迪，它以什么方式没有像预期的那样隐藏“系列”？对我来说，它似乎工作。当我单击图例中“已计划”旁边的框时，此数据将被隐藏，再次单击时，它们会再次显示。实际上很整洁。

标签： javascript d3.js charts javascript-framework dimple.js

【解决方案1】：

我没有使用过 dimple.js，但对 dc.js 印象深刻，http://dc-js.github.io/dc.js/。与dimple 一样，dc.js 是一个库，它提供了使用d3.js 制作图表的便捷方法。更重要的是，dc.js 旨在提供随着用户交互过滤底层数据集而动态更新的反应式图表。 dc.js 在 Crossfilter http://square.github.io/crossfilter/ http://blog.rusty.io/2012/09/17/crossfilter-tutorial/ 之上构建交互式图表。 Crossfitler 提供了以编程方式在客户端对数据行进行排序、过滤和聚合的功能。

【讨论】：