Question

所以这有点类似于

What's easiest way to get Python script output on the web? 和 Matplotlib: interactive plot on a web server

但没有一个人使用过d3.js，我认为他们没有达到相同的互动水平。

所以我是d3.js的新手，并且坦率地不知道我应该在这个例子中开始。

项目流程：

在前端询问用户名。发送到后端python
获取x深度的图形数据（对象+边缘），其中x距离起始节点的距离是Python调用第三方网站API
运行一些机器学习数据（python）
在d3.js中显示图形+一些数字（可能在右下角）循环：
有一个交互式d3.js图表，这样如果我点击一个节点，它将重做计算，并将其作为起始节点
让d3.js显示每个节点的部分文本（前10个字符？），然后在鼠标悬停时显示全文。

（7）奖励更新可嵌入图片？像那些个人资料签名一样？

问题：我如何实现这种双向通信？我应该从哪里开始？有没有更好的方法可以做到这一点？

旁注：我计划使用Google App Engine进行此项目，但我不知道是否允许您将其用作“vm”按钮。虽然。

谢谢！

编辑：这看起来很像Python at backend JS at frontend integration，但我不知道从哪里开始，我认为他们建议更多以艺术为导向的工具。

Answer 1

听起来你需要在Python中编写一个消费并返回JSON的Web服务。我不确定数据是来自客户端还是服务器，所以对于这个例子，我假设它来自客户端。

将您的图形数据以JSON格式发布到您的网络服务
处理服务器端
将表示处理结果的JSON返回给客户端
使用d3.js
客户端上的用户交互会创建新的或修改过的数据结构
返回第1步

也许您的服务器端Web服务方法看起来像这样（这是基于web.py的伪代码）：

import simplejson

class ml(object):

    def POST(self,data=None):
        # turn the JSON string into a Python data structure
        d = simplejson.loads(data)
        # do stuff
        results = alter_data(d)
        web.header('Content-Type','application/json')
        # send JSON back to the client
        return simplejson.dumps(results)

您的客户端代码可能看起来像这样（再次，只是粗略的草图）。这个例子假设你使用jQuery来做你的AJAX。

function render(data,textStatus) {
    d3
      .select('svg')
      .selectAll('circle')
      .data(data)
      .enter()
      .append('circle')
      .on('click',function() {
          $.getJSON(
              'your_webservice_url',
              // POST an updated data structure to your service
              { 'data' : alter_data(data) },
              // Call the render method again when new data is received
              render);
       });
}

d3.js'enter和exit方法可以非常轻松地更新数据的直观表示。我建议您阅读这些文档。

This example可能会为您提供有关如何使用JSON表示图表数据以及如何呈现它的一些想法。

查看on方法，了解在点击节点时如何触发对Web服务的POST。

我将跳过真正具体的内容，例如用d3.js显示文本。我相信你可以通过仔细阅读d3.js documentation来了解如何做到这一点。

Answer 2

这是一个迟到的答案，我偶然发现了这个python包：Bokeh

为了涵盖你的要求的第1-6点，似乎你只是只有必须编写python代码，这对于不习惯编写java脚本的人来说是一个加分。

但是这个包仍然很新，可能有一些我目前还不知道的限制。

D3.js前端和Python后端之间的双向流？ /网站中的交互式图表

2 个答案: