0

ボックスをクリックすると、そのボックスが SVG コンテナーの中央に再配置され、他のすべての要素も同様に遷移しますが、同じ相対位置に留まるように、インタラクティブな組織図を作成しようとしています。したがって、リストの一番上のボックスをクリックすると、それらはすべて一緒に下に移動します。次に、下のボックスの 1 つをクリックすると、それらはすべて一緒に上に移動しますが、常に選択したボックスが中央に表示されます。すでに中央にあるボックスをクリックすると、ボックスは移動しないはずですが、現時点ではあちこちに飛んでいます。

私は最初のクリックでこれを機能させましたが、その後のクリックごとにボックスがあちこちに飛び始めます。マウスリスナーを使用して現在の位置を取得し、選択したボックスを中央に配置して変換/翻訳にフィードするオフセットを計算しています。これは、オフセットが正しく計算されているため (console.log で表示)、奇妙な動作が発生していると思いますが、適用されたトランジションはこの計算と等しくありません。

変換/変換に関する多くの投稿を読みましたが、それらはすべて、複数の連続した遷移ではなく、単一の遷移に適用されるようです。新しい各トランジションの前に .attr(transform, null) を使用しようとしましたが、これは機能しませんでした。また、選択したコンポーネントの現在の x、y を動的に抽出し、これらの属性をオフセット値で更新しようとしましたが、これもうまくいきませんでした。本当にこれで立ち往生しており、どんな助けも大歓迎です!

ありがとう、SD

<script type="text/javascript">


var cwidth = 1000;
var cheight = 500;
var bwidth = 100;
var bheight = 50;

// container definition
var svgContainer = d3.select("body").append("svg")
                    .attr("width",cwidth)
                    .attr("height",cheight)
                    .on("mousemove", mousemove); 

// Background gray rectangle
svgContainer.append("svg:rect")
.attr("x",0)
.attr("y",0)
.attr("width",cwidth)
.attr("height",cheight)
.style("fill", "lightgrey");                                 

// data
var secondData = [
   { "idx": 1, "name": "Commercial" },
   { "idx": 2, "name": "Finance" },
   { "idx": 3, "name": "Operations" },
   { "idx": 4, "name": "Business Services" }
];

var secondElements = secondData.length;

// group definition
var secondNodes = svgContainer.append("g")
       .attr("class", "nodes")
       .selectAll("rect")
       .data(secondData)
       .enter()
       .append("g")
       .attr("transform", function(d, i) {
         d.x = 300;             
         d.y = ((cheight/secondElements)*d.idx)-bheight;
         return "translate(" + d.x + "," + d.y + ")"; 
       });

// Add elements to the previously added g element.
secondNodes.append("rect")
    .attr("class", "node")
    .attr("height", bheight)
    .attr("width", bwidth)
    .style("stroke", "gray")
    .style("fill", "white")
    .attr("y", function() {return -(bheight/2);})
    .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
    .on("mouseout", function(){d3.select(this).style("fill", "white");})
    .on("mousedown", center);

// Add a text element to the previously added g element.
secondNodes.append("text")
    .attr("text-anchor", "left")
    .attr("x", 15)
    .attr("y",5)
    .text(function(d) {return d.name;});

// gets current coordinates for transition 
var current = [0,0];
var xshift = 0;
var yshift = 0;

// get offset to centre from current mouse location
function mousemove() {
  //console.log(d3.mouse(this));
current = d3.mouse(this);
xshift = 500 - current[0];
yshift = 250 - current[1];
}

//applies transitions
function center(d) {

secondNodes.selectAll("rect")
    .transition()            
    .delay(0)            
    .duration(500)
    .attr("transform", "translate(" + xshift + "," + yshift + ")")
    .each("end", function() {
        secondNodes.selectAll("text")
            .transition()            
            .delay(0)            
            .duration(0)
            .attr("transform", null);   
    });

}


</script>
4

1 に答える 1

0

すべての相対位置を維持したい場合はg、transform 属性 one を設定できる要素にすべてを含める方がはるかに簡単だと思います。つまり、多くの要素を移動する代わりに、最上位のコンテナーだけを移動する必要があります。クリックを処理するためのコードは、その 1 つの要素に transform 属性を設定するだけでよいことを除いて、ほとんど同じままです。

于 2013-04-29T10:34:22.780 に答える