Mastering Qlik Sense

Preparing the SVG structure for the chart and the axis

As we are not creating a complex visualization with lots of functionality (yet), the preparation is relatively simple. However, it is still considered a good practice to separate one-off code executions from the remaining functions, or at least have a section within your code that covers that aspect in a segregated way.

In the case of the Mastering QS bar chart, the preparation will revolve around appending an SVG element to the extension div. This is achieved using the d3 function, as follows:

//MasteringQSBarChart.js - scope.prep() (snippet)scope.svg = d3.select($element.children()[0])        .append('svg')scope.svg.append('g')    .attr('class', 'canvas') scope.svg.append('g') .attr('class', ...