2013-04-19 2 views
1

qtWebKit에서 d3js를 사용하려고합니다. 특히 나는 다음 테스트 페이지를 만들었습니다QtWebKit의 d3.event 객체

<!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> 
이 html 코드의 purpouse에가에 설명 된대로 구형 영역 "발사"scroll 이벤트를하고 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 사용 :

Q_INVOKABLE void callbackScrollEvent(QString data); 

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

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); 
} 

을하지만 d3.event 객체가 비어처럼 :

test "[object Object]" 

이 난 것이 있습니다 있어야 할 곳에 없는? Qt 4.8.4를 사용하고 있지만 Qt 5.0.1을 사용하는 경우에도 문제가 계속 발생합니다.

답변

0

크롬에서는 개체이기도합니다. 그러나 크롬 개발자 도구는이 개체의 구조를 확장하고 표시합니다. 따라서 "[object Object]"는 코드에서 올바른 결과입니다.

당신은지도에 객체를 변환합니다

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

이에 코드

function draw() { 
    console.log(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)을 쓰면 QtWebKit (draw() 함수를 수정하여 callbackScrollEvent (QString 데이터) 함수를 호출하여 "NaN"을 반환 함)를 사용하는 동안 크롬에 float 숫자를 올바르게 반환합니다. – user2294119

+0

(draw) 함수는 draw() 함수를 어떻게 수정 했습니까? 여기에 코드를 넣을 수 있습니까? – lephix

+0

QWebKit에서 함수 draw() {callback.callbackScrollEvent ("scale :"+ d3.event.scale);} – user2294119