Граф направленной центрирующей силы

на основе этого примера (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]
        })
      })
    })
*/

Большое спасибо! Ян


person user2126836    schedule 02.03.2013    source источник


Ответы (1)


Индексы, на которые вы ориентируетесь для своих узлов, не совпадают с тем, что набор данных узлов имеет data0 до data1. Итак, простое решение состоит в следующем:

var data12 = data1.concat(data0)

вместо текущего:

var data12 = data0.concat(data1)

Скрипка

Однако это может быть не идеальным решением, если теперь вы хотите иметь ссылки между объектами в data1. Поэтому я рекомендую использовать собственные идентификаторы, как это сделано в этом примере.

person Christopher Chiche    schedule 03.03.2013