1

我正在尝试在 qtWebKit 中使用 d3js。特别是我创建了以下测试页面：

<!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 代码的目的是让 rect “触发”滚动事件并从 d3.event 对象中检索比例值，如https://github.com/mbostock/d3/wiki/Zoom-Behavior中所述。

如果我在 chrome 中加载此示例，查看控制台我可以看到对象 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，问题仍然存在。

4

1 回答 1

0

在 chrome 中，您也可以看到它也是一个对象。但是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
于 2013-04-19T11:48:58.813 回答