I have created a line chart using d3.js v4 framework and I would like to add on this line chart the d3-tip functionality. The link I use to get the d3-tip function is this from
here
.
To use the d3-tip in my code I use the following methodology:
extension.js file:
define(["qlik", "jquery", "./d3.v4.min", "css!./D3_LineChart.css", "./initialProperties", "./chartProperties",
"
https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.9.1/d3-tip.min.js
"
],
function (qlik, $, d3, css, initProps, chartProps) {
return {
....
var tool_tip = d3Tip.tip()
.attr("class", "d3-tip")
.offset([-20, 0])
.html(function(d) { return d.dValues + ": " + roundNumber(d.m1Values);});
svg.call(tool_tip);
svg.selectAll(".dot") //the circle data point on a line chart
.data(data)
.enter().append("circle")
.attr("class", "dot1")
.attr("cx", function(d){ return correctXScale(d); })
.attr("cy", function(d){return yScale(d.m1Values); })
.attr("r", 5)
.on('mouseover', tool_tip.show)
.on('mouseout', tool_tip.hide);
}
When I run the code I get back the following error
How can I resolve this? I used the same extension in this
jsfiddle location
and I managed to create the graph. But in Qlik Sense I couldn't manage to create it. How can I resolve such issue?
Based on the documentation the proper way to use the https location of d3-tip is
<script src="
https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.9.1/d3-tip.min.js
" integrity="sha512-a+/SD0dbGeXTN4AA5F1dDZqsPvXKKyS1bvU2z5ElpKNJ4xQlOMUs/1+suA+j+kj5nAAya+VmT5HUKZmazluxVQ==" crossorigin="anonymous"></script>
You can find all the extension files in the zip folder attached. I have also included a .qvf file in case you would like to re-regenerate the error.
