如何在d3js / dimplejs图表中过滤系列？

Question

I want to make d3js/dimplejs chart to a responsive/interactive one. I want to filter the 'series' according to the clicks in 'legends'. I tried like below. But This is not hiding the 'series' as I expected. This works pretty charm with 'bubble' chart.

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

I also want to filter the charts with 'Code' as well. Is it possible to get it through by Legend? Or any other possible ways?

Answer 1

I have not used dimple.js but have been very impressed with dc.js, http://dc-js.github.io/dc.js/ . Like dimple, dc.js is a library that provides convenient methods for making charts with d3.js. More important is that dc.js is designed to provide reactive charts that dynamically update as user interaction filters the underlying data set. dc.js builds interactive charts on top of a Crossfilter, http://square.github.io/crossfilter/ http://blog.rusty.io/2012/09/17/crossfilter-tutorial/ . Crossfitler provides the functionality to programmatically sort, filter, aggregate rows of data on the client.