3

D3 の新機能...

簡単な例を複製しようとしていますが、mysql からのデータを使用しています。列の名前を「名前」と「サイズ」に変更したので、簡単に移行できるはずです。行/項目!d.children;が処理するデータを制限しているか、コードにエラーがあると思われます。

既存の .json にクラスを追加するにはどうすればよいですか?

または

既存の .json を機能させるには、どのコードを削除する必要がありますか?

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var diameter = 960,
    format = d3.format(",d"),
    color = d3.scale.category20c();

var bubble = d3.layout.pack()
    .sort(null)
    .size([diameter, diameter])
    .padding(1.5);

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

d3.json("json.php", function(error, root) {
  var node = svg.selectAll(".node")
      .data(bubble.nodes(classes(root))
      .filter(function(d) { return !d.children; }))
.enter().append("g")
  .attr("class", "node")
  .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

  node.append("title")
      .text(function(d) { return d.className + ": " + format(d.value); });

  node.append("circle")
      .attr("r", function(d) { return d.r; })
      .style("fill", function(d) { return color(d.packageName); });

  node.append("text")
      .attr("dy", ".3em")
      .style("text-anchor", "middle")
      .text(function(d) { return d.className.substring(0, d.r / 3); });
});

// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
  var classes = [];

  function recurse(name, node) {
    if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
    else classes.push({packageName: name, className: node.name, value: node.size});
  }

  recurse(null, root);
  return {children: classes};
}

d3.select(self.frameElement).style("height", diameter + "px");

</script>

json.php 

<?php
$username = "homedbuser"; 
$password = "homedbuser";   
$host = "localhost";
$database="homedb";

$server = mysql_connect($host, $username, $password);
$connection = mysql_select_db($database, $server);

$myquery = "
SELECT  `name`, `size` FROM  `lists`
";
    $query = mysql_query($myquery);

    if ( ! $myquery ) {
        echo mysql_error();
        die;
    }

    $data = array();

    for ($x = 0; $x < mysql_num_rows($query); $x++) {
        $data[] = mysql_fetch_assoc($query);
    }

    echo json_encode($data);     

    mysql_close($server);
?>

また、スクリプトにエラーがあると思いrootます（データであると思われます）。回答があるまで、私の研究でコードを更新し続けます。

4

1 に答える 1

2

試しているグラフでは、データが階層形式である必要があります。あなたが与えたクエリでは、データが階層化されているようには見えません。

私は csv データを使用しましたが、それは問題ではありません。リンクで指定したグラフに使用した形式を指定しました。

以下の形式でデータを取得する SQL クエリを記述し、d3.json を使用して php ファイルをインポートすると、すべて正常に動作するはずです。

すべてのコードとサンプル データを貼り付けました。

これはあなたを助けるかもしれません。問題がある場合は、サンプル データも提供してください。

データ：

    名前、サイズ
    レベル1,23
    レベル1,23
    レベル1,23
    レベル1,23
    レベル1,23
    レベル1,23
    レベル1,23
    レベル1,23
    レベル1,23
    レベル2,23
    レベル2,23
    レベル2,23
    レベル2,23
    レベル2,23
    レベル2,23
    レベル2,23
    レベル2,23
    レベル2,23

階層への変換に使用される関数:

    d3.csv("data.csv", 関数(ルート) {

                var newData = { name :"root", children : [] },
                    レベル = ["名前"];

                // データ行ごとに、出力ツリーをたどって期待されるレベルをループします
                root.forEach(関数(d){
                    // これを現在のレベルへの参照として保持します
                    var depthCursor = newData.children;
                    // 一度に 1 レベル下に移動
                    level.forEach(関数(プロパティ、深さ){

                        // ブランチがすでに作成されているかどうかを確認します
                        var インデックス;
                        depthCursor.forEach(関数(子、i){
                            if ( d[プロパティ] == child.name ) index = i;
                        });
                        // ブランチがない場合は追加します
                        if ( isNaN(インデックス) ) {
                            depthCursor.push({ name : d[プロパティ], children : []});
                            インデックス = depthCursor.length - 1;
                        }
                        // ツリーの奥に進むにつれて、新しい子配列を参照します
                        depthCursor = depthCursor[index].children;
                        // これはリーフなので、指定されたブランチに最後の要素を追加します
                        if (深さ === level.length - 1 ) depthCursor.push({ name : d.name, size : d.size });
                    });
                });

                // 取得したものを出力します
                d3.select('body').append('pre')
                           .text(JSON.stringify(newData, null, ' '));
            }))

両方の機能を組み合わせたスクリプト:

    変数の直径 = 960、
        フォーマット = d3.format(",d"),
        色 = d3.scale.category20c();

    変数バブル = d3.layout.pack()
        .sort(ヌル)
        .size([直径, 直径])
        .パディング (1.5);

    var svg = d3.select("本体").append("svg")
        .attr("幅", 直径)
        .attr("高さ", 直径)
        .attr("クラス", "バブル");

    d3.json("yourphpfile.php", 関数(エラー, データ) {
        var root = { name :"root", children : [] },
                    レベル = ["名前"];

                // データ行ごとに、出力ツリーをたどって期待されるレベルをループします
                data.forEach(関数(d){
                    // これを現在のレベルへの参照として保持します
                    var depthCursor = root.children;
                    // 一度に 1 レベル下に移動
                    level.forEach(関数(プロパティ、深さ){

                        // ブランチがすでに作成されているかどうかを確認します
                        var インデックス;
                        depthCursor.forEach(関数(子、i){
                            if ( d[プロパティ] == child.name ) index = i;
                        });
                        // ブランチがない場合は追加します
                        if ( isNaN(インデックス) ) {
                            depthCursor.push({ name : d[プロパティ], children : []});
                            インデックス = depthCursor.length - 1;
                        }
                        // ツリーの奥に進むにつれて、新しい子配列を参照します
                        depthCursor = depthCursor[index].children;
                        // これはリーフなので、指定されたブランチに最後の要素を追加します
                        if (深さ === level.length - 1 ) depthCursor.push({ name : d.name, size : d.size });
                    });
                });


      var node = svg.selectAll(".node")
          .data(バブル.ノード(クラス(ルート))
          .filter(function(d) { return !d.children; }))
        .enter().append("g")
          .attr("クラス", "ノード")
          .attr("transform", function(d) { return "translate(" + dx + "," + dy + ")"; });

      node.append("タイトル")
          .text(function(d) { return d.className + ": " + format(d.value); });

      node.append("円")
          .attr("r", function(d) { return dr; })
          .style("fill", function(d) { return color(d.packageName); });

      node.append("テキスト")
          .attr("dy", ".3em")
          .style("テキストアンカー", "中間")
          .text(function(d) { return d.className.substring(0, dr / 3); });
    });

    // ルートの下にあるすべてのリーフ ノードを含むフラット化された階層を返します。
    関数クラス(ルート) {
      var クラス = [];

      関数再帰（名前、ノード）{
        if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
        else classes.push({packageName: name, className: node.name, value: node.size});
      }

      再帰（ヌル、ルート）;
      return {children: クラス};
    }

    d3.select(self.frameElement).style("高さ"、直径 + "px");
于 2013-11-15T07:40:17.527 に答える