Question

基于此示例（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( )"; });

    });

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

ThanḱYou！

扬

编辑：

我能够将节点或多或少地放在中间位置。但现在，我在外部段和内部节点之间添加链接时遇到了严重问题。在这个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]
        })
      })
    })
*/

非常感谢！扬

Answer 1

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

var data12 = data1.concat(data0)

而不是当前：

var data12 = data0.concat(data1)

Fiddle

但是，如果您现在想要在data1中的对象之间建立链接，那么它可能不是完美的解决方案。因此，我建议使用自定义ID，就像在this example中一样。

中心力导向图

1 个答案: