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

Question

所以这有点类似于

在Web上获取Python脚本输出的最简单方法是什么？ 和 Matplotlib:Web服务器上的交互式绘图

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

所以我是d3.js的新手,坦率地说我不应该在这个例子中开始.

项目流程:

1. 询问前端的用户名.发送到后端python
2. 通过Python调用第三方网站API获取x深度的图形数据(对象+边),其中x与起始节点的距离
3. 运行一些机器学习数据(python)
4. 在d3.js循环中显示图形+一些数字(可能在右下角):
5. 有一个交互式d3.js图,这样如果我点击一个节点,它将重做计算,并将其作为起始节点
6. 有它,以便d3.js显示每个节点的部分文本(前10个字符？),然后鼠标悬停后显示全文.

(7)奖励更新可嵌入图片？像那些个人资料签名？

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

旁注:我打算使用Google App Engine来完成这个项目,我不知道是否可以让你将它用作'vm'.

谢谢!

编辑:这看起来很像后端JS中的Python在前端集成,但我不知道从哪里开始,我认为他们建议更多以艺术为导向的工具作为他的项目的结果.

Answer 1

听起来你需要在Python中编写一个使用和返回JSON的Web服务.我不确定数据是否源自客户端或服务器,因此对于此示例,我假设它来自客户端.

1. 将您的图形数据以JSON格式发布到您的Web服务
2. 处理服务器端
3. 将表示处理结果的JSON返回给客户端
4. 用d3.js渲染它
5. 客户端上的用户交互创建新的或修改的数据结构
6. 回到第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方法使得更新数据的可视化表示变得非常容易.我建议阅读这些文档.

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

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

我将跳过真正具体的内容,比如用d3.js显示文本.我相信你可以通过阅读d3.js文档来弄清楚如何做到这一点.