d3.jsデータ値に基づいて異なるSVG要素を追加する

Question

私はd3.jsツリーの要素型に基づいてXMLスキーマ要素をツリーに表示するように作業しています。

私は、次のようなコードを持っている：

// Enter any new modes at the parent's previous position. 
var nodeEnter = node.enter().append('g') 
        .attr('class', 'node') 
        .attr("transform", function(d) { 
          return "translate(" + source.y0 + "," + source.x0 + ")"; 
        }) 
        .on('click', clickXSD) 
        .on('dblclick', dblclickXSD); 

nodeEnter.append('rect') 
     .filter(function(d) { return d.data.elementType == "xs:element" }) 
     .attr('class', 'node') 
     .attr('y', -16) 
     .attr('rx', 5) 
     .attr('ry', 5) 
     .attr('width', function(d) { return d.data.y_size + 50; }) 
     .attr('height', function(d) { return 32; }) 
     .style("fill", function(d) { 
       return d._children ? "lightsteelblue" : "lemonchiffon"; 
     }); 

私はコードにのようなものを実装することで、少しクリーン作ることができるようにしたいと思います：

nodeEnter.xs-element() 
     .filter(function(d) { return d.data.elementType == "xs:element" }) 

または類似した何かをして、持っています関数を使用してxs：要素を描画し、次にxs：要素などを描画する関数を作成します。

Answer 1

私の答えはhttps://www.atlassian.com/blog/archives/extending-d3-jsです。

2つの方法が考えられます。 1つはプロトタイプを作ることで、もう1つはコール関数を使うことです。私は第二の方法を使用しています。

nodeEnter.filter(function(d) { return d.data.elementType == "xs:element" }).call(xsElement); 

    function xsElement(selection) { 
    selection.append('rect') 
    .attr('class', 'node') 
    .attr('y', -16) 
    .attr('rx', 5) 
    .attr('ry', 5) 
    .attr('width', function(d) { 
    return d.data.y_size + 50; 
    }) 
    .attr('height', function(d) { 
    return 32; 
    }) 
    .style("fill", function(d) { 
    return d._children ? "lightsteelblue" : "lemonchiffon"; 
    }) 
    .filter(function(d) { return d.data.documentation != null }) 
    .append("title").text(function(d) { return d.data.documentation; }); 

    // Add labels for the nodes 
    selection.append('text') 
    .attr("dy", ".35em") 
    .attr("y", -6) 
    .attr("x", 6) 
    .attr("text-anchor", "start") 
    .text(function(d) { return d.data.name; }); 

. 
. 
. 

    } 

ここで、選択された値はフィルタリングされたnodeEnterの値です。