Make non selectable extension selectable

[#1]

Hi all,

     I'm trying to modify a non selectable extension (sunburst zoomable D3) to selectable by adding the js code:

  $element.html(html);           

  $element.find('.selectable').on('qv-activate', function() {

  if(this.hasAttribute("data-value")) {

        var value = parseInt(this.getAttribute("data-value"), 10), dim = 0;

        self.selectValues(dim, [value], true);

  $(this).toggleClass("selected");     

  }

  });

from  https://help.qlik.com/sense/en-us/developer/WikipediaInsert Wikipedia Linkhttps://help.qlik.com/sense/en-us/developer/#../Subsystems/Workbench/Content/CodeExamples/ext_people...

The source is the sunburst zoomable D3  brianwmunz/QlikSenseD3ZoomableSunburst · GitHub

That extension works fine but does not set the selections within Sense (current selection bar) done with mouse clicks.

The matter is that it seems there is no way to transform the clickable areas into selectable ones - if I debug the code, the    $element.find('.selectable').on('qv-activate', function()  is not "triggered".

.selectable belongs to standard client.css but it seems is ignored.

Does anyone have an idea on how to make these areas selectable?

Thank you,

FMa

[#2 · Accepted solution]

You need to set the class selectable to the element and add the qElemNumber to data-value.

In the people chart example look at this section:

$.each(qData.qMatrix, function(key, row) {
  if(row.length > 1) {
  //dimension is first, measure second
  var dim = row[0], meas = row[1];
  if(dim.qIsOtherCell) {
  dim.qText = layout.qHyperCube.qDimensionInfo[0].othersLabel;
  }
  html += '<div title="' + dim.qText + ':' + meas.qText + '"';
  //negative elementnumbers are not selectable
  if(dim.qElemNumber > -1) {
  html += "class='selectable' data-value='" + dim.qElemNumber + "'"
  }
  html += '>';
  html += "<div class='label'>" + dim.qText + "</div>";
  html += "<div class='bar' style='width:" + Math.round(w * (meas.qNum / vmax )) + "px;'> </div>";
  html += "</div>";
  }

When you figured that out you need to modifiy the click function. I would start with a less complex example like making the simple table extension selectable or/and implement a D3 graph as an extension.

D3noob has alot of examples with tutorials.

D3.js Tips and Tricks

http://bl.ocks.org/d3noob

[yblake]

I didn't study this extension in particular, but I'll share two "generic" ways to go :

1) First you have to backup each dimension value id in your D3 data, i.e :

var qMatrix = layout.qHyperCube.qDataPages[0].qMatrix;

var dataD3 = qMatrix.map( function(d) {return {

  // Retrieve needed hypercube data here

  "dimensionid":d[0].qIsOtherCell ? null : d[0].qElemNumber

});

Then you have to setup d3 element class and data-value :

.attr("class", "selectable")

.attr("data-value",function(d) {return d.dimensionid})

2) Another way to go is to handle selections with D3.

add "selected":0 to your D3 data,

add click event handler on your D3 element :

.on("click", clickHere)

Finally handle visual feedback and sense selection in your handler :

function clickHere(d) {

  if ( d.dimensionid != null ) {

    d.selected = 1-d.selected;

    d3.select(this).style("fill", d.selected ? "#52cc52" : "lightgrey");

    var value = d.dimensionid, dim = 0;

    self.selectValues(dim, [value], true);

  }

}

Hope this will help you.

Regards

[pgrenier]

Good morning Francesco,

Were you able to contribute an upgrade to Brian Munz's Zoomable Sunburst extension based on Karl's and/or Yves' tips?

I would also be quite interested to see a new version of this nice extension object be made available.

Regards,

Philippe

[#5]

Thank you,  I'll try to integrate and you (all) will be informed.

FMa

[balexbyrd]

yblake‌

I'm following #2 and I didn't quite understand what you meant by this:

Where would I put this line? D3 data wasn't intuitive enough

Thanks in advance!

2) Another way to go is to handle selections with D3.

add "selected":0 to your D3 data,      <---- This line here

add click event handler on your D3 element :

[yblake]

You will find a link to a very simple extension that illustrates this in this thread :

selectValues extension API do not unselect last selected value

The extension and test application can be downloaded from :

yblake/d3click · GitHub

However, as noticed in the thread, there is a bug since Sense 2.0.x using D3 click event when you try to clear the last selected value.

Hope this may help you.

[ErikWetterberg]

Hi Karl,

A small update on the code snippet. In Sense 1.0 'others' (-3) was not selectable in an extension, but from Sense 2.0 it is, so now you could instead do:

//total (-1) is not selectable
if(dim.qElemNumber !== -1) {
   html += "class='selectable' data-value='" + dim.qElemNumber + "'"
}

Erik

Please mark the appropriate replies as correct or helpful so our team and other members know that your question has been answered to your satisfaction.

[ErikWetterberg]

Same here, others is now select table, so you could do just:

var dataD3 = qMatrix.map( function(d) {return {

  // Retrieve needed hypercube data here

  "dimensionid": d[0].qElemNumber

});

Erik

Please mark the appropriate replies as correct or helpful so our team and other members know that your question has been answered to your satisfaction.