D3 - D3のSVGシンボルでズームする

Question

このフィドルによって示されるように、ノードをズームインしたいと考えています。 http://jsfiddle.net/HF57g/2/

フィドル出典：How to zoom in/out d3.time.scale without scaling other shapes bound to timeline

フィドルの助けを借りて、私はSVGサークルでズームを適用することができました。

注：SVG Circlesを使用すると、x軸とy軸の属性が提供されます。私が欲しいもの

.enter().append("circle") 
.attr("cx", function(d) { return xScale(d); }) 
.attr("cy", function(d) { return yScale(d); })  

、だから私は円やダイヤモンドの両方を可能にするために、D3の「d3.svg.symbol」を選んだ。このズーム機能に

を使用して両方の円とダイヤモンドを持つことです。

しかし、私が直面している問題は、D3のSVGシンボルを使用すると、x軸を操作するためのアクセス権がないことです。

.enter().append("path") 
.attr("transform", function(d) { 
     return "translate(" + d.x + "," + d.y + ")"; }) 
.attr("d", d3.svg.symbol() 
      .size(145) 
      .type(function(d) { 
          if(d.value <= 10) 
           return "diamond"; 
          else 
          return "circle"; 
         })); 

フィドルから以下のコードは、フィドルから採取されたズーム用のX軸の操作を示します。可能であれば翻訳して同じことをしたい。

return svg.selectAll("rect.item") 
    .attr("x", function(d){return scale(d);}) 

以下のコードは、SVGサークルで動作する方法を示し、それは私が、ズーム動作させるために考え、最も論理的な方法を示しています。しかし、残念ながらそれは動作しません。

var zoom = d3.behavior.zoom() 
      .on("zoom", function(){ 
      //If I use SVG Circles the following code works. 
      //chart.selectAll(".item").attr("cx", function(d){ return xScale(d); }); 

      //By using SVG Symbols and translate, this does not work 
      chart.selectAll(".item").attr("transform", function(d) { return "translate("+ d.x +", 0)";}); 

      }).x(xScale); 

ここでは、ダイヤモンドと円で編集されたフィドルです。 update_eventsで https://jsfiddle.net/g67cgt4w/

Answer 1

https://jsfiddle.net/62vq9h8p/

（）あなたが<circleDiamond>要素を持っていないので、あなたがセレクタとして「circleDiamond.item」を使用することはできません機能 - あなたが使用できる理由です<circle> SVG要素」がありますcircle.myCircle "と表示されます。あなたは "。diamond.item"のようなより良いクラスを設定することができます。それらを選択する。これを変更して追加しました。

var cy = d3.transform(d3.select(this).attr("transform")).translate[1]; 
return "translate(" + scale(d) + "," + cy +")"; 

これは、現在のY位置を維持します。

d3.transform(d3.select(this).attr("transform")) 

現在の要素の変換と.translateとり[1]翻訳オブジェクトを取得し、（2番目の項目である）、Y値を返します。代わりに0のインデックスを取得する場合は、現在のXの値を取ることができます。