1

There are many examples showing the seamless grouping and filtering between DC.js controls. However, can DC controls be used to filter the results displayed from a D3.js control? (example: DC pieChart used to filter D3 force-directed chart by Color Group)

The desired outcome is to select the Color Group from a pie chart and have it filter the nodes from the D3 control. I understand the 2 can co-exist on the same page; however, can DC interact with D3 in this manner or is there a difference approach?

Example (Pseudo Code):

//Color Group Data
data = [
    {
     "Group": "Orange",
     "Color": "Coral"
    },
    {
     "Group": "Orange",
     "Color": "Dark Orange"
    },
    {
     "Group": "Yellow",
     "Color": "LemonChiffon"
    },
    {
     "Group": "Yellow",
     "Color": "PapayaWhip"
    },
    ...
]

//Crossfilter Code Here to establish Dimension
var ndx = crossfilter(data);
groupDim = ndx.dimension(function(d) {return "" + d.Group;}); 


//Pie Chart to Display Simple Colors
var colorsChart = dc.pieChart("chartColors");
...
dc.renderAll(); 


//Force Directed chart, would be used to display all nodes of colors
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);

... 
CampbellGolf
  • 812
  • 12
  • 27
  • Possible duplicate of [dc.js - Listening for chart group render](http://stackoverflow.com/questions/25336528/dc-js-listening-for-chart-group-render) – Gordon Jun 24 '16 at 21:05
  • You just need to configure your D3 chart to listen to dc.js events. The linked duplicate question will show you how. – Gordon Jun 25 '16 at 15:07
  • I have exactly the same question, but would you please provide an example? – user3329081 May 24 '18 at 10:04

0 Answers0