d3.js - d3.event object in QtWebKit -
i'm trying use d3js inside qtwebkit. in particular i've created following test page:
<!doctype html> <meta charset="utf-8"> <style> rect.pane { cursor: move; pointer-events: all; } </style> <body> <script type="text/javascript" src="d3.min.js"></script> <script type="text/javascript"> var margin = {top: 20, right: 60, bottom: 30, left: 20}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; // svg var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var zoom = d3.behavior.zoom() .on("zoom", draw); svg.append("rect") .attr("class", "pane") .attr("width", width) .attr("height", height) .call(zoom); function draw() { console.log(d3.event); } </script> the purpouse of html code have rect "firing" scroll event , retrieve scale value d3.event object, explained in https://github.com/mbostock/d3/wiki/zoom-behavior.
if load example in chrome, looking @ console can see object d3.event:
object {type: "zoom", scale: 1.0511729090877093, translate: array[2], sourceevent: wheelevent, target: function} now i've inserted example qtwebkit widget; using qmainwindow:
mainwindow::mainwindow(qwidget *parent) : qmainwindow(parent), ui(new ui::mainwindow), view(new qwebview(this)) { ui->setupui(this); setcentralwidget(view); view->load(qurl("qrc:/html/test.html")); qwebframe *webframe = view->page()->currentframe(); webframe->addtojavascriptwindowobject(qstring("callback"), this); } with
q_invokable void callbackscrollevent(qstring data); and
void mainwindow::callbackscrollevent(qstring data) { qdebug() << "test" << data; } but d3.event object empty:
test "[object object]" is there i'm missing? i'm using qt 4.8.4 using qt 5.0.1 issue still present.
in chrome can see object too. chrome developer tool expand , display structure of object. "[object object]" right result in code.
you can try change code
function draw() { console.log(d3.event); } to
function draw() { console.log(d3.map(d3.event)); } this transform object map, key object's properties. may results like
u {type: "zoom", scale: 1.1809926614295303, translate: array[2], sourceevent: wheelevent, target: function} i not sure in qtwebkit. if cannot want, can debug/check specific property output following:
console.log("type:"+d3.event.type) console.log("scale:"+d3.event.scale) you get
type:zoom fiddle.jshell.net:46 scale:1.1809926614295303
Comments
Post a Comment