0

テキストの高さの値を d に保存しようとしています (したがって、適切なサイズの四角形の周りに描画できます) が、ティック関数または他の場所で定義されていません。

d.height

値を保持する必要があります。（しかし、そうではありません）

だから私はティック関数（その一部）を持っています：

  function tick() {
    z.attr('d', function(d) {
    alert (d.height); //not defined
var sourceX = d.source.x + textWidth/2 + 10,
    sourceY = d.source.y + d.height/2 + 10,
    targetX = d.target.x + textWidth/2 + 10,
    targetY = d.target.y + d.height/2 + 10;      

return 'M' + sourceX + ',' + sourceY + 'L' + targetX + ',' + targetY;
});

shape.attr('transform', function(d) {
middle_rect.attr("height", d.height/2 + 20);        
side_rect.attr("height", d.height/2 + 20);   
return 'translate(' + d.x + ',' + d.y + ')';        
});

そして、ここで値を保存しようとしている方法（コードの下部） 

     shape = shape.data(nodes);
// add new nodes
 var g = shape.enter().append('svg:g').attr('class', function(d) { return d.type +'        node'; });

   middle_rect = svg.selectAll(".middle")
   .append("svg:rect")
   .attr("rx", "10")
   .attr("ry", "10")
   .style("stroke", "rgb(47,136,214)")
   .style("fill", "url(#middle_gradient)");


  side_rect = svg.selectAll(".side")
   .append("svg:rect")
   .attr("rx", "10")
   .attr("ry", "10")
   .style("stroke", "rgb(47,136,214)")
   .style("fill", "url(#side_gradient)");



  txt = g.append('svg:text')
   .attr('class',function (d){return 'bigest ' + d.id ;}  )
   .attr('y', ".5em")
   .attr("dy", "1em")
   .style("fill", "black")
   .each (function (d) {
    d.height =  this.getBoundingClientRect().height;
    // alert (d.height); //here I have this value
});

グローバル化できますか？または、これらの値を保存する必要がありますか?

4

1 に答える 1

2

高さフィールドを Node 自体にアタッチしようとしているように見えますが、これは一般的に悪い習慣と考えられています。

これらすべての値を格納するデータ構造を作成したり、場合によっては高さをデータセットに追加したりしないでください。

もう 1 つの方法は、テキスト ノードに data-height 属性を作成することです。

http://jsfiddle.net/heavyhorse/893jT/

svg.selectAll('text.data-label').each(function(d, i){
    var height = this.getBoundingClientRect().height;
    var width = this.getBoundingClientRect().width;
    console.log(i+': ('+width+','+height+')');

    // create custom data-attr:
    this.setAttribute('data-width', width);
    this.setAttribute('data-height', height);
    console.log(this);

    // attach to dataset:
    dataset[i].width = width;
    dataset[i].height = height;
});
于 2013-10-28T17:27:52.653 に答える