标签: bundle-layout

我正在创建Mike Bostock的分层边缘捆绑图的修改版本:

http://mbostock.github.com/d3/talk/20111116/bundle.html

但我想制作跨越某些数据组的弧,如下所示:

我目前只是硬编码弧的长度,但我想动态地做.我怎么能做到这一点？这是我目前的代码:

/* MH - USER DEFINED VARIABLES */
var chartConfig = { "Tension" : .85, "canvasSize" : 800, "dataFile" : "../data/projects.json", "linePadding" : 160, "textPadding" : 30, "arcPadding" : 5, "arcWidth" : 30 }
var pi = Math.PI;

var radius = chartConfig.canvasSize / 2,
    splines = [];

var cluster = d3.layout.cluster() //Cluster is the diagram style, a node to link dendrogram dendrogram (tree diagram)
    .size([360, radius - chartConfig.linePadding]); //MH - sets the size of the circle …

我正在尝试使用分层边缘捆绑将url可视化为targetURL.这些列之间需要什么类型的关系？

这是样本:

这是我的代码.

我收到错误了

TypeError: node.parent.children is undefined

我有一个json文件,其元素如下:

[{
    "name": "Manuel Jose",
    "ttags": ["vivant", "designer", "artista", "empreendedor"]
}]

我正在尝试使用此结构获取节点和边缘以完成如下图形:

(图表取自d3.js文档)

我name和ttagsjson文件中的两个都指节点,ttags实际上是节点和另一个节点之间的链接.

但是,我无法理解如何使用此库d3及以上的json文件创建此图.

    d3.json("/data/tedxufrj.json", function(classes) {
      var nodes = cluster.nodes(package.root(classes)),
          links = package.imports(nodes);

      vis.selectAll("path.link")
          .data(splines = bundle(links))
        .enter().append("path")
          .attr("class", "link")
          .attr("d", line);

      vis.selectAll("g.node")
          .data(nodes.filter(function(n) { return !n.children; }))
        .enter().append("g")
          .attr("class", "node")
          .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
        .append("text")
          .attr("dx", function(d) { return d.x < 180 ? 8 : -8; }) …

我试图在D3.js中创建一个类似于这个的图表:

http://mbostock.github.io/d3/talk/20111116/bundle.html

此示例使用分层边缘捆绑.但是,我的数据本质上不是分层的,我想表示一个相对简单的网络结构.我将一堆节点分成几组,并通过简单的连接矩阵连接.我能够在D3.js中生成一个与力相关的网络图,类似于:

http://bl.ocks.org/mbostock/4062045

var width = 500,
    height = 500;

var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);

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

var graph = getData();

force
    .nodes(graph.nodes)
    .links(graph.links)
    .start();

var link = svg.selectAll(".link")
    .data(graph.links)
   .enter()
    .append("line")
    .attr("class", "link")
    .style("stroke-width", function(d) { return Math.sqrt(d.value); });

var node = svg.selectAll(".node")
    .data(graph.nodes)
   .enter()
    .append("circle")
    .attr("class", "node")
    .attr("r", 5)
    .style("fill", function(d) { return color(d.group); })
    .call(force.drag);

node.append("title")
    .text(function(d) { return d.name; });

force.on("tick", function() …

这是D3中HEB可视化示例的链接.

http://mbostock.github.io/d3/talk/20111116/bundle.html

我注意到在可视化中,组之间存在明显的距离(或所谓的空间),显然组之间的距离大于同一组内节点之间的距离.但我并没有真正得到代码的哪一部分控制这个距离.任何人都知道这里如何控制距离？我想在我自己的HEB中使用这个功能.

我正在尝试自定义Mike Bostock的Hierarchical Edge Bundling示例:

到目前为止,我已经能够生成与我的数据相同的json文件,但我无法将其显示出来.

在控制台中,我收到以下错误:

TypeError: n is undefined

以及警告:

mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create

我尝试在运行本地服务器的不同浏览器中无济于事.我也发现这些问题没有解决问题.

你可以在这个要点中找到我的代码和改变过的json .

任何帮助将不胜感激.