6

D3.js を使用して、D3 力指向レイアウト グラフのノードに円グラフを配置したいと考えています。これは、集団遺伝学における一般的な視覚化です。たとえば、http://mathildasanthropologyblog.files.wordpress.com/2008/06/as3.jpgを参照してください。

ここに画像の説明を入力

私は非常に基本的なグラフ プロットから始めました。

<!DOCTYPE html>
<html lang="en">
    <head>
        <script type="text/javascript" src="d3/d3.v3.js"></script>
    </head>
    <body>
        <script type="text/javascript">

graph = { "nodes":[{"proportions": [{"group": 1, "value": 1}, 
                                    {"group": 2, "value": 2}, 
                                    {"group": 3, "value": 3}]},
                   {"proportions": [{"group": 1, "value": 2}, 
                                    {"group": 2, "value": 2}, 
                                    {"group": 3, "value": 2}]}],
          "links":[{"source": 0, "target": 1, "length": 500, "width": 1}]
        }

var width = 960,
    height = 500,
    radius = 10,
    color = d3.scale.category20c();

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

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

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

var link = svg.selectAll(".link")
    .data(graph.links)
  .enter().append("line")
    .attr("class", "link");

var node = svg.selectAll(".node")
    .data(graph.nodes)
  .enter().append("circle")
    .attr("class", "node")
    .attr("r", radius)
    .call(force.drag);

force.on("tick", function() {
  link.attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });

  node.attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
});
        </script>
    </body>
</html>

しかし、円のノードを円グラフに置き換えようとすると、円グラフがすべてプロットの隅に積み上げられてしまいます。

<!DOCTYPE html>
<html lang="en">
    <head>
        <script type="text/javascript" src="d3/d3.v3.js"></script>
    </head>
    <body>
        <script type="text/javascript">

graph = { "nodes":[{"proportions": [{"group": 1, "value": 1}, 
                                    {"group": 2, "value": 2}, 
                                    {"group": 3, "value": 3}]},
                   {"proportions": [{"group": 1, "value": 2}, 
                                    {"group": 2, "value": 2}, 
                                    {"group": 3, "value": 2}]}],
          "links":[{"source": 0, "target": 1, "length": 500, "width": 1}]
        }

var width = 960,
    height = 500,
    radius = 10,
    color = d3.scale.category20c();

var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.value; });

var arc = d3.svg.arc()
    .outerRadius(radius)
    .innerRadius(0);

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

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

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

var link = svg.selectAll(".link")
    .data(graph.links)
  .enter().append("line")
    .attr("class", "link");

var node = svg.selectAll(".node")
    .data(graph.nodes)
  .enter().append("g")
   .attr("class", "node");

node.selectAll("path")
  .data(function(d) {return pie(d.proportions); })
 .enter().append("svg:path")
  .attr("d", arc)
  .style("fill", function(d) { return color(d.group); });;

force.on("tick", function() {
  link.attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });

  node.attr("x", function(d) { return d.x; })
      .attr("y", function(d) { return d.y; });
});
        </script>
    </body>
</html>

どんな援助でも大歓迎です！

4

2 に答える 2

4

問題は、force-on-tick コールバックの最後のステートメントのようです。

node.attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y; });

SVG パスには、そのような x/y 属性はありません。代わりにパスを翻訳してみてください。

node.attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; });
于 2013-02-10T03:24:29.420 に答える
2

上記のコードは機能しませんでした。以下のスニペットでは、両方の円グラフが適切な場所に表示され、エッジが表示され、円グラフの色が表示されます。

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>

    <style>

        .node {
            stroke: #fff;
            stroke-width: 1.5px;
        }

        .link {
            stroke: #808080;
            stroke-opacity: .6;
        }

    </style>
</head>
<body>

<script type="text/javascript">

    graph = { "nodes":[
                    {"proportions": [{"group": 1, "value": 1},
                                     {"group": 2, "value": 2},
                                     {"group": 3, "value": 3}]},
                    {"proportions": [{"group": 1, "value": 2},
                                     {"group": 2, "value": 2},
                                     {"group": 3, "value": 2}]}],
              "links":[{"source": 0, "target": 1, "length": 500, "width": 1}]
    }

    var width = 960,
    height = 500,
    radius = 25,
    color = d3.scale.category10();

    var pie = d3.layout.pie()
        .sort(null)
        .value(function(d) { return d.value; });

    var arc = d3.svg.arc()
        .outerRadius(radius)
        .innerRadius(0);

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

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

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

    var link = svg.selectAll(".link")
        .data(graph.links)
        .enter().append("line")
        .attr("class", "link");

    var node = svg.selectAll(".node")
        .data(graph.nodes)
        .enter().append("g")
        .attr("class", "node");

    node.selectAll("path")
        .data(function(d, i) {return pie(d.proportions); })
        .enter()
        .append("svg:path")
        .attr("d", arc)
        .attr("fill", function(d, i) { return color(d.data.group); });;

    force.on("tick", function() {
        link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

        node.attr("x", function(d) { return d.x; })
            .attr("y", function(d) { return d.y; })
            .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"});
    });
</script>
</body>
</html>
于 2013-08-11T20:38:56.213 に答える