2

折りたたみ可能なツリーの上から下の向きで作業しています。ここで私はいくつかの問題に行き詰まりました。ツリーを実装するには、d3.v3.js を使用します。各ノードのツリーにチェック ボックスを追加するにはどうすればよいですか。

    // Create the link lines.
    svg.selectAll(".link")
        .data(links)
      .enter().append("path")
        .attr("class", "link")
        .attr("d", d3.svg.diagonal().projection(function(d) { return [o.x(d)+15, o.y(d)]; }));

        svg.selectAll("input")
        .data(nodes)
        .enter().append("foreignObject")
        .attr('x' , o.x)
        .attr('y',  o.y)
        .attr('width', 50)
        .attr('height', 20)
        .append("xhtml:body")
        .html("<form><input type=checkbox id=check></input></form>")
     .on("click", function(d, i){
            console.log(svg.select("#check").node().checked) 
            }) ;

    svg.selectAll("image")
        .data(nodes)
     .enter().append("image")
        .attr('x' , o.x)
        .attr('y',  o.y)
        .attr('width', 30)
        .attr('height', 20)
        .attr("xlink:href", "check.png")
  }); 
});

svg に追加する際のチェックボックスですが、ブラウザには表示されません。誰でもこの問題を解決するのを手伝ってください

4

3 に答える 3

3

この行の入力ではなく、foreignObjects (つまり、チェックボックス) のホルダーを作成する必要があります。

svg.selectAll("input")

どちらであるべきか

svg.selectAll("foreignObject")

次に、データを使用してチェックボックスの数を駆動し、行っdata(data)たようにそれを でバインドする必要がありenter()ます。複数の要素を表示する場合は、x と y に動的変数を使用する必要があります。簡単な例では、.attr('x', function (d,i) { return d.x; }). したがって、すべてをフィドルにまとめると、これが得られます。

于 2013-10-09T08:59:22.190 に答える