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( )"; });

    });

私の質問は: どうすれば内側のノードを円弧の中心に移動できますか??

ありがとう！

1月

編集：

ノードをほぼ中央に配置することができました。しかし今、外側のセグメントと内側のノードの間にリンクを追加するのに深刻な問題があります。この 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]
        })
      })
    })
*/

どうもありがとう！1月

4

1 に答える 1

2

ノードのターゲットとなるインデックスは、ノードのデータセットがdata0以前に持っていたものと同じではありませんdata1。したがって、簡単な解決策は次のとおりです。

var data12 = data1.concat(data0)

現在の代わりに：

var data12 = data0.concat(data1)

フィドル

ただし、data1内のオブジェクト間をリンクする必要がある場合は、完全なソリューションではない可能性があります。したがって、この例で行われているように、カスタムIDを使用することをお勧めします。

于 2013-03-03T04:02:27.390 に答える