1

基于这个例子（http://bl.ocks.org/mbostock/938288）我这样做了：

var data0 = [
      {name:'bob',  connections: ['jane', 'tom', 'sue']},
      {name:'jane', connections: ['bob', 'sue']},
      {name:'sue',  connections: ['tom', 'bob', 'jane', 'tom']},
      {name: 'tom', connections: []}
     ];

    var data1 = [
            {"name":"Salvation Army", "connections": []},
            {"name":"Northwestern University", "connections": []},
            {"name":"William Dicket", "connections": []},
            {"name":"Scott Saff", "connections": []},
            {"name":"City Co", "connections": []},
            {"name":"Action 1", "connections": []},
            {"name":"Action 2", "connections": []},
            {"name":"Action 3", "connections": []},
            {"name":"Action 4", "connections": []},
            {"name":"Action 5", "connections": []},
            {"name":"Action 6", "connections": []},
            {"name":"Action 7", "connections": []},
            {"name":"Action 8", "connections": []},
            {"name":"Action 9", "connections": []},
            {"name":"Action 10", "connections": []},
            {"name":"Action 11", "connections": []}
           ]   


    var w = 500,
        h = 500,
        angle = d3.scale.ordinal().domain(d3.range(0, data1.length)).rangeBands([0, 2 * Math.PI]);

        line = d3.svg.chord()
        .startAngle(function(d) { return (d.startAngle + d.endAngle) / 2; })
        .endAngle(function(d) { return (d.startAngle + d.endAngle) / 2; })
        .radius(h / 2 - 20);

        var angles = {},
        connections = [];


        data1.forEach(function(d, i) {
          var a = angle(i)
          angles[d.name] = { 
            startAngle: a, 
            endAngle: a + angle.rangeBand() / 2 
          }
        })

        data1.forEach(function(p) {
          p.connections.forEach(function(c) {
            connections.push({
              source: angles[p.name],
              target: angles[c]
            })
          })
        })


    var force = self.force = d3.layout.force()
    .nodes(data0)
    .distance(10)
    .charge(-100)
    .size([200, 200])
    .start();

    var vis = d3.select("body").append("svg:svg")
        .attr("width", w)
        .attr("height", h)
      .append("svg:g")
        .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");

        var node = vis.selectAll("g.node")
        .data(data0)
        .enter().append("svg:g")
        .call(force.drag);

        node.append("circle")
          .attr("r", 10); 

    var path = vis.selectAll("path")
        .data(data1)
      .enter().append("svg:path")
        .attr("d", d3.svg.arc()
        .innerRadius(h / 2 - 20)
        .outerRadius(h / 2 - 10)
        .startAngle(function(d, i) { return angles[d.name].startAngle })
        .endAngle(function(d, i) { return angles[d.name].endAngle; }))
        //.call(force.drag);


    force.on("tick", function() {
        node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
        path.attr("transform", function(d) { return "translate( )"; });

    });

我的问题是：如何将内部节点移动到圆弧的中心？

谢谢你！

简

编辑：

我能够或多或少地将节点居中在中间。但是现在，我在外部段和内部节点之间添加链接时遇到了严重的问题。在这个 jsfiddle ( http://jsfiddle.net/dinosaur/SFYrJ/ ) 中，您可以看到，有一个指向外部段的链接，但链接长度太短......有人知道吗？

var data0 = [
  {name:'bob',  "connections": ['jane', 'tom', 'sue']},
  {name:'jane', "connections": ['bob', 'sue']},
  {name:'sue',  "connections": ['tom', 'bob', 'jane', 'tom']},
  {name: 'tom', "connections": []}
 ];

var data1 = [
        {"name":"City Co"},
        {"name":"Action 1"},
        {"name":"Action 2"},
        {"name":"Action 3"},
        {"name":"Action 4"},
        {"name":"Action 5"},
        {"name":"Action 6"},
        {"name":"Action 7"},
        {"name":"Action 8"},
        {"name":"Action 9"},
        {"name":"Action 10"},
        {"name":"Action 11"}
       ]

var links = [
             {"source":1,"target":6,"value":10},
             {"source":6,"target":7,"value":10},
             {"source":7,"target":8,"value":10},
             ]


var w = 500,
    h = 500,
    angle = d3.scale.ordinal().domain(d3.range(0, data0.length)).rangeBands([0, 2 * Math.PI]);

var data12 = data0.concat(data1)

    /*
    line = d3.svg.chord()
    .startAngle(function(d) { return (d.startAngle + d.endAngle) / 2; })
    .endAngle(function(d) { return (d.startAngle + d.endAngle) / 2; })
    .radius(h / 2 - 20);
    */
    var angles = {},
    connections = [];


    data0.forEach(function(d, i) {
      var a = angle(i)
      angles[d.name] = { 
        startAngle: a, 
        endAngle: a + angle.rangeBand() / 2 
      }
    })
/*
    data1.forEach(function(p) {
      p.connections.forEach(function(c) {
        connections.push({
          source: angles[p.name],
          target: angles[c]
        })
      })
    })
*/

非常感谢！简

4

1 回答 1

2

您针对节点的索引与data0之前的节点数据集不同data1。因此，简单的解决方案如下：

var data12 = data1.concat(data0)

而不是当前的：

var data12 = data0.concat(data1)

小提琴

但是，如果您现在想要在 data1 中的对象之间建立链接，它可能不是完美的解决方案。所以我建议使用自定义 id，就像在这个例子中所做的那样。

于 2013-03-03T04:02:27.390 回答