2013-04-19 3 views
1

Я пытаюсь использовать d3js внутри qtWebKit. В частности, я создал следующую тестовую страницу:d3.event объект в QtWebKit

<!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> 

purpouse этого HTML код должен иметь прямоугольника «обжиг» событие прокрутки и получить значение масштаба от объекта d3.event, как описано в https://github.com/mbostock/d3/wiki/Zoom-Behavior.

Если я загружаю этот пример в хроме, глядя на консоль я могу видеть объект d3.event:

Object {type: "zoom", scale: 1.0511729090877093, translate: Array[2], sourceEvent: WheelEvent, target: function} 

Теперь я вставил этот пример в QtWebKit виджета; с помощью 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); 
} 

с

Q_INVOKABLE void callbackScrollEvent(QString data); 

и

void MainWindow::callbackScrollEvent(QString data) 
{ 
qDebug() << "test" << data; 
} 

но объект d3.event подобен пустой:

test "[object Object]" 

Есть ли что-то я отсутствует? Я использую Qt 4.8.4, но также используя Qt 5.0.1 проблема все еще присутствует.

ответ

0

В хроме вы можете видеть, что это тоже объект. Но инструмент разработчика Chrome будет расширяться и отображать структуру этого объекта. Таким образом, «[Object Object]» - это правильный результат в вашем коде.

Вы можете попытаться изменить код

function draw() { 
    console.log(d3.event); 
} 

в

function draw() { 
    console.log(d3.map(d3.event)); 
} 

Это трансформирует объект на карте, ключ свойства объекта. Вы можете получить результаты, похожие на:

u {type: "zoom", scale: 1.1809926614295303, translate: Array[2], sourceEvent: WheelEvent, target: function} 

Я не уверен, что вы получите в QtWebKit. Если вы не можете получить вы хотите, вы можете отлаживать/проверять конкретное свойство по выводит его как следующее:

console.log("type:"+d3.event.type) 
console.log("scale:"+d3.event.scale) 

вы получите

type:zoom fiddle.jshell.net:46 
scale:1.1809926614295303 
+0

Привет, спасибо за ваш ответ. На самом деле, записывая console.log (d3.event.scale), он возвращает правильно число с плавающей точкой в ​​chrome, а при использовании QtWebKit (изменяя функцию draw(), чтобы вызвать функцию callbackScrollEvent (данные QString), она возвращает «NaN». – user2294119

+0

I думаю, что возвращение NaN заставляет компилятор думать, что draw() должен возвращать числовое значение. Как вы изменили функцию draw()? Можете ли вы поместить свои коды здесь? – lephix

+0

уверен: в QWebKit я использую функцию draw() {callback.callbackScrollEvent («scale:» + d3.event.scale);} – user2294119