1

（これはここで尋ねられた質問のフォローアップの質問です。その質問では問題は完全には解決されておらず、これは一種の継続であるため、新しい質問を投稿します）

次のようなツリーを表すネストされたjson構造があります。

 [{
   "name": "flare",
   "root": "true",
   "children": [
    {
     "name": "analytics",
     "nestedproperties": [
         { "attribute": "attribute1", 
           "type": "type1" },
         { "attribute": "attribute2", 
           "type": "type2" },
         { "attribute": "attribute3", 
           "type": "type3" }
     ],
     "children": [
      {
         "name": "cluster",
         "nestedproperties": [
             { "attribute": "attribute4", 
               "type": "type4"},
             ....
         ]
      },
  ...

nestedpropertiesノードとその子を含む通常のツリー構造を表示するだけでなく、親ノードにリンクする円で 各要素を表現したいと考えてい ます。

この質問でアドバイスされているように、他のいくつかの質問と他の例への回答に従って、nestedpropertiesネストされたデータを引数として に渡すことで、各要素を表示することができました。コードのコア部分は次のようになります。.data()

  var pii = nodeEnter.selectAll("circle.pii")
       .data(function(d) {return d.nestedproperties; })


  var piiEnter = pii.enter().append("svg:g")
      .attr("class", "piinode")
      .attr("transform", "translate(50,50)") 
      //.attr("transform", function(d, i) { return "translate(" + d.x + "," + d.y + ")"; })    // <<--- I cannot call this function because d.x and d.y does not exist
      .call(forcepii.drag);

  // Append the circle for the node 
  piiEnter.append("svg:circle")
      .attr("class", "pii")
      .attr("r", 25)
      .style("fill", "blue")
      .style("stroke", "#999999")

完全なコードはこのjsfiddleにあります。

問題は、ネストされたプロパティ内の要素を表す円がすべて重なり合って表示され、ドラッグできないことです。force.nodes()ネストされた要素に適用する方法や、transformそれらのプロパティを使用してティックを行う方法がわかりません。

次のことを試してみると、「Uncaught TypeError: 未定義のプロパティ 'index' を設定できません」というメッセージが表示されます

   forcepii.nodes(function(d) { return d.nestedproperties; })
    //.links(links)
    .gravity(0.05)
    .charge(-1500)
    .linkDistance(100)
    .friction(0.5)
    .linkStrength(function(l, i) {return 1; })
    .size([w, h])
    //.on("tick", tick)
    .start();

これが結果の写真です。ご覧のとおり、円は互いに重なって描かれており、力は適用されていません。

ここに画像の説明を入力

助けてくれてありがとう！

4

1 に答える 1

1

最後に、これがどのように行われるかを知りました。これはライブの例を示す要点です: http://bl.ocks.org/djjupa/5655723

私のデータは「柔軟」だったので、ネストされた選択として「子」要素を持つように再コーディングしたので、次のようになります。

[{
   "name": "flare",
   "root": "true",
   "children": [
    {
     "name": "analytics",
     "nestedproperties": {
         "children": [
              { "attribute": "attribute1", 
                "type": "type1" },
              { "attribute": "attribute2", 
                "type": "type2" },
              { "attribute": "attribute3", 
                "type": "type3" }
          ]
     },
     "children": [
      {
         "name": "cluster",
         "nestedproperties": {
               "children": [
                   { "attribute": "attribute4", 
                     "type": "type4"
                   },
                      ....
               ]
         }
      },
  ...
于 2013-05-27T08:05:59.130 に答える