相关疑难解决方法(0)

我正在尝试选择合适的技术来更新项目,该项目基本上可以在可缩放的可缩放图形中渲染数千个点.使用Protovis的当前实现表现不佳.看看这里:

http://www.planethunters.org/classify

完全缩小时大约有2000个点.尝试使用底部的手柄放大一点,然后拖动它以平移.除非你有一台真正快速的计算机,否则你会发现它非常不稳定,你的CPU使用率可能在一个核心上达到100%.对焦点区域的每次更改都会调用重绘为protovis,这种方法非常慢,并且绘制的点数越多越差.

我想对界面进行一些更新,以及更改底层可视化技术,以便更灵敏地进行动画和交互.从下面的文章看,似乎是在另一个基于SVG的库或基于画布的库之间进行选择:

http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/

d3.js,源自Protovis,基于SVG,应该更好地渲染动画.但是,我怀疑它有多好,它的性能上限是多少.出于这个原因,我也在考虑使用像KineticJS这样的基于画布的库进行更彻底的改造.然而,在我使用一种或另一种方法之前,我想听听那些使用这么多数据做过类似Web应用程序并得到他们意见的人.

最重要的是性能,第二个重点是易于添加其他交互功能和编程动画.一次可能不会超过2000个点,每个点上的误差小.放大,缩小和平移需要顺利进行.如果最新的SVG库在这方面还不错,那么使用d3的方便性可能会超过KineticJS的增加设置等.但是如果使用画布有巨大的性能优势,特别是对于计算机速度较慢的人来说,那么我肯定会喜欢这样.

使用SVG的纽约时报制作的应用程序示例,但仍然可以顺利地动画:http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html .如果我可以获得该性能而不必编写自己的画布绘图代码,我可能会选择SVG.

我注意到一些用户使用了混合的d3.js操作和画布渲染.但是,我无法在网上找到很多关于此的文档或与该帖子的OP联系.如果有人有任何使用DOM-to-Canvas(演示,代码)实现的经验,我也想听听你的意见.它似乎是一个很好的混合体,能够操纵数据和自定义控制如何渲染它(以及因此性能),但我想知道是否必须将所有内容加载到DOM仍然会减慢速度.

我知道有一些类似于这个问题的现有问题,但它们都没有提出同样的问题.谢谢你的帮助.

后续行动:我最终使用的实现是https://github.com/zooniverse/LightCurves

我有一个使用d3.js创建的强制布局

我想同时拥有可拖动力布局的正常功能以及缩放功能.

我基本上复制/粘贴了这个(http://jsfiddle.net/nrabinowitz/QMKm3/)代码的缩放代码.这与Mike Bostock在此(http://bl.ocks.org/mbostock/3680957)示例中使用的缩放方式相同.

这是我的代码:http://jsfiddle.net/kM4Hs/6/

从我的中可以清楚地看到,缩放工作正常,但我无法在力布局中选择单个节点并拖动它们.

我发现其他作者使用d3.v2.js而不是我正在使用的较新的d3.v3.js这个事实.当我将导入更改为v2时,它可以完美运行.但是,为了进步和一般良好的代码,我想尽可能使用v3.

<script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>

两个问题:为什么v3在v2没有时打破了力布局,更重要的是,我能做些什么,如果有的话,修复它？

提前致谢!

是否有任何好的javascript库用于在网页中绘制图形？我想要一个现代的HTML5库,最好使用canvas和/或webgl.我已经 发现 一 对夫妇 的 良好的 网络 库 ,同时 研究,但他们不扩展到我的(高达2000个顶点+ 20000个边缘),像桌面软件运行图的大小Gephi可以轻松地处理或他们闪光/ silverlight-根据.所以,到目前为止,我最好的发现是基于d3.js的实现.如果他们在Seadragon风格的缩放中内置了一些基于弹簧/力的自动布局/聚类算法也会很好.

已经通过SVG几何变焦显示了用于力导向图几何缩放的许多情况.

在几何缩放中,我只需要在缩放功能中添加变换属性.但是,在语义缩放中,如果我只在节点中添加转换属性,则链接将不会连接到节点.所以,我想知道在d3中是否存在用于力导向图的几何缩放的解决方案.

这是我的例子与下面前一种情况的几何变焦.我有两个问题:

1. 当我缩小,然后拖动整个图形时,图形将奇怪地消失.
2. 使用相同的重绘功能

function zoom() {
  vis.attr("transform", transform);
}
function transform(d){
  return "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")";
}

Run Code Online (Sandbox Code Playgroud)

这只更新了一个svg元素的"transform"属性.但是如何使功能改变节点位置？

但我想要做的是语义缩放.我试图修改缩放和转换功能,但不确定正确的方法.这是我尝试的.我改变的功能:

function zoom() {
  node.call(transform);
  // update link position
  update();
}
function transform(d){
  // change node x, y position, not sure what function to put here.
}

Run Code Online (Sandbox Code Playgroud)

我想很多与D3.js一起工作的人已经经历过同样的事情:你的网络或你所采取的任何可移动元素如果被推到硬盘上,就会继续飞出svg-element.如果我的网络很大,外部节点就会消失,它们就会"落入世界的边缘".

我非常害羞有一种方法可以使svg的边框成为坚固的"墙",因此元素不能离开它并在空间中隐形飞行:)

你是怎么处理这个问题的？你是怎么解决的？

大卫先生,谢谢你

当使用D3或GraphGL库将鼠标悬停在力导向图形可视化中的节点上时,是否可以创建平滑的动画放大效果(类似于Mac OS X上的停靠点)？

节点需要扩展并替换其周围的其他节点,同时保持力导向布局.

如果有人可以用这个来展示,那就太好了!谢谢

请注意,这与此问题中的简单缩放不同

我见过这个问题：Is there a way to zoom into a D3 force layout graph?

但是我从我的图表中得到了一些意想不到的行为 - 经过几次拖动或缩放或平移后，所有节点都会冻结并且拖动停止工作。

我创建了这个小提琴：http : //jsfiddle.net/7gpweae9/9/

所以要求提供代码，所以这里是主要部分：

var svg = d3.select("#graph")
    .append("svg:svg")
        .attr("width", width)
        .attr("height", height)
        .attr("pointer-event", "all")
    .append("svg:g")
        .call(d3.behavior.zoom().on("zoom", zoom))
    .append("svg:g");

svg.append("svg:rect")
    .attr("width", width)
    .attr("height", height)
    .attr('fill', 'white');

var link = svg.selectAll(".link");
var node = svg.selectAll(".node");

var force = d3.layout.force()
    .nodes(nodes)
    .links(links)
    .size([width,height])
    .linkDistance(100)
    .charge(-400)
    .start();

var drag = d3.behavior.drag()
    .origin(function(d) { return d; })
    .on("dragstart", dragstarted)
    .on("drag", dragged)
    .on("dragend", dragended);

node = svg.selectAll(".node")
    .data(nodes) …

我用了

d3.select(".graph")
  .call(d3.behavior.zoom().on("zoom", redraw)).on("dblclick.zoom", null).on("wheel.zoom", null);

function redraw() {
  console.log("here", d3.event.translate, d3.event.scale);
  g.attr("transform","translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); 
} 

创建 pan，但是当我创建一个 .on 事件侦听器并redraw()使用除我拥有的方式之外的任何方式进行调用时，它返回 d3.event.translate 和 d3.event.scale，因此我无法更新转变。我已经看到了使用地图按钮进行缩放的代码，但没有看到图表。一定有可能，但我不知道如何。我到目前为止的代码是...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

.node {
  stroke: #000;
  stroke-width: 0px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}
.graphmap {
  border: 1px solid black;
}
</style>
</head>
<body>
<div class="graph"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

// start draw zoom buttons
var zoom = d3.select(".zoom").append("svg")
    .attr("width", …

我有一个测试站点,我正在从我自己的数据构建基于d3的力导向网络图.

如果我选择大约五六个基因,我的图形中的节点开始被绘制在画布之外.

我需要调用d3 API的哪些部分来控制缩放级别,以便节点不会从画布的边缘消失？

如果可用,我肯定会感谢任何简要解释这个概念的代码片段,除非实现相当简单.谢谢你的建议.

SO上有类似的问题，但我根本不知道如何在我的情况下使用它。我正在尝试向力图添加缩放/平移功能。我对 D3.js 的了解很基础，请原谅我的愚蠢问题。

这是该网站的原始小提琴。

这个小提琴是我尝试添加缩放功能。

我添加了这段代码：

  var zoom = d3.behavior.zoom()
        .scaleExtent([1, 10])
        .on("zoom", zoomed);

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.call(zoom);


function zoomed() {
      container.attr("transform", "translate(" + d3.event.translate +
     ")scale(" + d3.event.scale + ")");
    }

    function dragstarted(d) {
      d3.event.sourceEvent.stopPropagation();

      d3.select(this).classed("dragging", true);
      force.start();
    }

    function dragged(d) {

      d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = 
     d3.event.y);

    }

    function dragended(d) {

      d3.select(this).classed("dragging", false);
    }

什么也没有发生，代码可以工作，但缩放和平移却不能。我缺少什么？