小编Viv*_*idD的帖子

我正在研究D3中的力导向图.我想通过将所有其他节点和链接设置为较低的不透明度来突出显示鼠标悬停节点,其链接及其子节点.

在这个例子中,http://jsfiddle.net/xReHA/,我能够淡出所有的链接和节点然后淡化连接的链接,但是,到目前为止,我还没有能够优雅地淡化连接的节点,它们是当前鼠标悬停节点的子节点.

这是代码中的关键功能:

function fade(opacity) {
    return function(d, i) {
        //fade all elements
        svg.selectAll("circle, line").style("opacity", opacity);

        var associated_links = svg.selectAll("line").filter(function(d) {
            return d.source.index == i || d.target.index == i;
        }).each(function(dLink, iLink) {
            //unfade links and nodes connected to the current node
            d3.select(this).style("opacity", 1);
            //THE FOLLOWING CAUSES: Uncaught TypeError: Cannot call method 'setProperty' of undefined
            d3.select(dLink.source).style("opacity", 1);
            d3.select(dLink.target).style("opacity", 1);
        });
    };
}

Uncaught TypeError: Cannot call method 'setProperty' of undefined当我尝试在从source.target加载的元素上设置不透明度时,我收到错误.我怀疑这不是将该节点作为d3对象加载的正确方法,但我找不到另一种方法来加载它而不再遍历所有节点以找到与链接的目标或源匹配的节点.为了保持性能合理,我不希望迭代超过所有节点.

我以http://mbostock.github.com/d3/ex/chord.html上的链接淡化为例:

但是,这并未显示如何更改已连接的子节点.

任何有关如何解决或改善这一点的好建议都将被激烈地推崇:)

我正在阅读D3.js文档,并且发现很难从文档中理解该selection.data方法.

这是文档中给出的示例代码:

var matrix = [
  [11975,  5871, 8916, 2868],
  [ 1951, 10048, 2060, 6171],
  [ 8010, 16145, 8090, 8045],
  [ 1013,   990,  940, 6907]
];

var tr = d3.select("body").append("table").selectAll("tr")
    .data(matrix)
  .enter().append("tr");

var td = tr.selectAll("td")
    .data(function(d) { return d; })
  .enter().append("td")
    .text(function(d) { return d; });

我理解大部分内容,但声明.data(function(d) { return d; })部分的内容是var td什么？

我最好的猜测如下:

• 该var tr语句已将四元素数组绑定到每个tr节点
• 的var td语句然后使用该四元件阵列作为其数据,以某种方式

但.data(function(d) { return d; })实际上如何获得这些数据,以及它返回了什么？

我最近了解了二进制空间分区树及其在三维图形和碰撞检测中的应用.我还简要地阅读了与四叉树和八叉树相关的材料.你什么时候在bsp树上使用四叉树,反之亦然？它们可以互换吗？如果我有足够的信息来填写这样的表格,我会感到满意:

            | BSP | Quadtree | Octree
------------+----------------+-------
Situation A |  X  |          |
Situation B |     |     X    |
Situation C |     |          |   X

什么是A,B和C？

根据http://bl.ocks.org/mbostock/3883245上的演示

我不知道xAxis上的格式化时间

这是我的代码:js:

    var data = [{
            "creat_time": "2013-03-12 15:09:04",
            "record_status": "ok",
            "roundTripTime": "16"
        }, {
            "creat_time": "2013-03-12 14:59:06",
            "record_status": "ok",
            "roundTripTime": "0"
        }, {
            "creat_time": "2013-03-12 14:49:04",
            "record_status": "ok",
            "roundTripTime": "297"
        }, {
            "creat_time": "2013-03-12 14:39:06",
            "record_status": "ok",
            "roundTripTime": "31"
        },{
            "creat_time": "2013-03-12 14:29:03",
            "record_status": "ok",
            "roundTripTime": "0"
    }];
    var margin = {top: 20, right: 20, bottom: 30, left: 50};
    var width = 960 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;
    var …

所以我有一个页面已经绘制了一个力导向图,就像这里显示的那样.

这很好.我从这里使用JS ,通过一些调整将节点分散得更好.

这些或多或少是唯一的区别:

d3.json("force.json", function(json) {
  var force = d3.layout.force()
      .gravity(0.1)
      .charge(-2000)
      .linkDistance(1)
      .linkStrength(0.1)
      .nodes(json.nodes)
      .links(json.links)
      .size([w, h])
      .start();

减少链接强度似乎使链接更像弹簧,因此它变得类似于经常使用的Fruchterman和Reingold技术.这种方法效果很好,但仅适用于相当小的图形.对于较大的图形,交叉的数量正在上升 - 正如人们所预料的那样,但它所依赖的解决方案通常远非最佳.我不是在寻找获得最佳解决方案的方法,我知道这非常困难.我只是希望它有一些粗略的添加,试图强制线和节点分开.

有没有办法在链接之间以及节点之间添加排斥？我不熟悉D3力的工作方式,我似乎无法找到任何说这可能的东西......

我有一个使用强制布局的图形,但它有一个固定的宽度w和高度h:

var svg = d3.select("#viz").append("svg")
            .attr("id", "playgraph")
            .attr("width", w)
            .attr("height", h)

var force = d3.layout.force()
              .nodes(nodes)
              .links(links)
              .charge(-1600)
              .linkDistance(45)
              .size([w, h]); 

这导致svg图表尽管屏幕或浏览器窗口大小发生了变化但不会缩放或缩小.为了使其响应(即自动调整自身大小),我尝试使用viewBox和preserveAspectRatio属性:

var svg = d3.select("#viz").append("svg")
            .attr("id", "playgraph")
            .attr("width", w)
            .attr("height", h)
            .attr("viewBox", "0, 0, 600, 400")
            .attr("preserveAspectRatio", "xMidYMid meet");

不幸的是,当我调整浏览器窗口大小时,这没有任何作用.我想知道力图是否.size([w, h])与此有关.

请详细说明如何使用力布局图来使用viewBox和preserveAspectRatio属性.

我一直在使用这个d3项目中的示例代码来学习如何显示d3图形,我似乎无法让文本显示在圆圈的中间(类似于此示例和此示例).我查看了其他示例,并尝试添加

node.append("title").text("Node Name To Display")

和

node.append("text")
    .attr("text-anchor", "middle")
    .attr("dy", ".3em").text("Node Name To Display")

节点的定义,但唯一的结果我看到的是"节点名称,以显示"之后被显示出来,当我将鼠标悬停在每个节点.它没有显示为圆圈内的文字.我是否必须编写自己的svg文本对象并根据圆的半径坐标确定需要放置的坐标？从另外两个例子来看,似乎d3已经以某种方式解决了这个问题.我只是不知道调用/设置的正确属性.

我正在搜索具有3维(x,y和z)并使用D3.js的图.请告诉我,如果有任何数据可视化网站,我可以找到这样的图表,或者如果d3js.org上有一个我错过了某种方式.

我刚开始涉足d3,发现学习曲线相当陡峭.这个过程与我习惯的过程完全不同,数学大多数都超出了我的想象.

无论如何,我的项目包含一个力布局,代表系统之间的集成地图.这部分工作得非常好,但是我确实有一个主要的问题,它也出现在Michael Bostocks网站上的强制定向布局演示中:当节点启动时,它们似乎被渲染出画布.在此之后,一些严肃的物理数学正在接管,模拟一个引力,它在一个相当混乱的路径上来回发送节点,直到它们冷静下来并在一些随机坐标上稳定下来.虽然这些动作在第一次运行演示时会逐渐消失,但是当您尝试查看公司网络接口的状态时,它管理的观点和服务器不会保持静止,一段时间后会变得很烦人.

我确信我有这个项目的正确布局设置,因为我确实希望服务器自动布局,我确实希望可视化它们之间的链接.然而,我对万有引力效应感到矛盾.

我想知道; 是否可以手动设置每个节点的初始位置,以便我可以将它们放在更接近重力中心并稍微缩短"反弹时间"？

我想用d3.js来构建一个谱系树.

我发现的所有例子都展示了有机树木.

有没有像样式这样的血统的例子吗？