1

d3.jsに組み込まれているforce-directedのこの例http://bl.ocks.org/1153292を変更しようとしています。

Jsonでのタイプに応じて、サークルのクラスを作成したいと思います。CSSを使用する必要がありますが、コードを変更して適用する方法がわかりません。

これは私がこれまでに変更したコードです。

  <!DOCTYPE html>
  <html>
    <head>
      <meta http-equiv="Content-type" content="text/html; charset=utf-8">
      <title>Mobile Patent Suits</title>
      <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
      <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.29.1"></script>
      <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"></script>
      <style type="text/css">

  circle {
    fill: #ccc;
    stroke: #333;
    stroke-width: 1.5px;
  }

  text {
    font: 10px sans-serif;
    pointer-events: none;
  }

  text.shadow {
    stroke: #fff;
    stroke-width: 3px;
    stroke-opacity: .8;
  }

      </style>
    </head>
    <body>
      <script type="text/javascript">

  // http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/
  var links = [
    {source: "t1", target: "hate", type: "green"},
    {source: "t1", target: "good", type: "green"},
    {source: "t2", target: "hate", type: "green"},
    {source: "t3", target: "good", type: "green"},
    {source: "t4", target: "good", type: "green"},
    {source: "hate", target: "airport", type: "yellow"},
    {source: "good", target: "airport", type: "yellow"},
    {source: "good", target: "flight", type: "yellow"},
  ];

  var nodes = {};

  // Compute the distinct nodes from the links.
  links.forEach(function(link) {
    link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
    link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
  });

  var w = 960,
      h = 500;

  var force = d3.layout.force()
      .nodes(d3.values(nodes))
      .links(links)
      .size([w, h])
      .linkDistance(60)
      .charge(-300)
      .on("tick", tick)
      .start();

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

  var path = svg.append("svg:g").selectAll("path")
      .data(force.links())
    .enter().append("svg:path")
      .attr("class", function(d) { return "link " + d.type; })
      .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

  var circle = svg.append("svg:g").selectAll("circle")
      .data(force.nodes())
    .enter().append("svg:circle")
      .attr("r", 6)
      .call(force.drag);

  var text = svg.append("svg:g").selectAll("g")
      .data(force.nodes())
    .enter().append("svg:g");

  // A copy of the text with a thick white stroke for legibility.
  text.append("svg:text")
      .attr("x", 8)
      .attr("y", ".31em")
      .attr("class", "shadow")
      .text(function(d) { return d.name; });

  text.append("svg:text")
      .attr("x", 8)
      .attr("y", ".31em")
      .text(function(d) { return d.name; });

  // Use elliptical arc path segments to doubly-encode directionality.
  function tick() {
    path.attr("d", function(d) {
      var dx = d.target.x - d.source.x,
          dy = d.target.y - d.source.y,
          dr = Math.sqrt(dx * dx + dy * dy);
      return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
    });

    circle.attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    });

    text.attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    });
  }

      </script>
    </body>
  </html>

誰かが私にヒントを与えることができますか？ありがとう

4

1 に答える 1

3

接続の配列がありますlinks。その後、次の行を使用して、この配列から個別のノードを抽出します。

  links.forEach(function(link) {
    link.source = nodes[link.source] || (nodes[link.source] = {name: link.source} );
    link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
  });

この時点typeで、ノードごとにを挿入する必要があります。したがって、たとえば、このノードにリンクのクラスを使用できます（ただし、その場合、ノードのすべてのリンクのうち1つだけがそのクラスを決定します）。これにより、次のコードが生成されます。

 links.forEach(function(link) {
    link.source = nodes[link.source] || (nodes[link.source] = {name: link.source, type: link.type} );
    link.target = nodes[link.target] || (nodes[link.target] = {name: link.target, type: link.type});
  });

だけでなく、すべてのノードにtype属性があるわけではありませんname。

後でここでサークルを作成するとき

  var circle = svg.append("svg:g").selectAll("circle")
      .data( force.nodes() )
    .enter().append("svg:circle")
      .attr("r", 6)
      .call(force.drag);

このtype属性を、次のように各円のクラスを決定する関数と一緒に使用できます。

  var circle = svg.append("svg:g").selectAll("circle")
      .data( force.nodes() )
    .enter().append("svg:circle")
      .attr("r", 6)
      .attr( 'class', function( d ) { console.log( d ); return d.type; } )
      .call(force.drag);

そして今、すべてのサークルはそれぞれのクラスを持っています。

この例では、ノードごとに何らかの方法でタイプを判別する必要があることに注意してください。したがって、それに応じて上記の宣言を変更してlinks.forEach( ... );ください。

于 2012-11-13T13:41:06.933 に答える