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 Circles 应用缩放。

注意：下面的代码显示，通过使用 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 Circles 一起工作的方式，它展示了我认为使缩放工作的最合乎逻辑的方式。但不幸的是，它不起作用。

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);

这是一个用菱形和圆圈编辑的小提琴。 https://jsfiddle.net/g67cgt4w/

Answer 1

https://jsfiddle.net/62vq9h8p/

在 update_events() 函数中，您不能使用“circleDiamond.item”作为选择器，因为您没有 <circleDiamond> 元素 - 有一个 <circle> svg 元素，这就是您可以使用“circle.myCircle”的原因例如。您可以设置一个更好的类，例如“.circle.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] 接受翻译对象并返回 Y 值（即第二项）。如果您获得 0 索引，则可以取当前 X 值。