[英]D3 - Zooming with D3's SVG Symbols
I want to zoom in my nodes in the following way shown by this fiddle. 我想以这个小提琴所示的方式放大我的节点。 http://jsfiddle.net/HF57g/2/
http://jsfiddle.net/HF57g/2/
Fiddle Source: How to zoom in/out d3.time.scale without scaling other shapes bound to timeline 小提琴源: 如何放大/缩小d3.time.scale而不缩放绑定到时间轴的其他形状
With the help of the fiddle, I was able to apply the zoom with SVG Circles. 在小提琴的帮助下,我能够使用SVG Circles应用缩放。
Note: The code below shows that by using SVG Circles you are provided with an x and y axis attribute. 注意:下面的代码显示,通过使用SVG Circles,您将获得x和y轴属性。
.enter().append("circle")
.attr("cx", function(d) { return xScale(d); })
.attr("cy", function(d) { return yScale(d); })
What I want, is to have circles and diamonds both using this zoom functionality 我想要的是使用这种缩放功能的圆圈和钻石
So I chose D3's "d3.svg.symbol", to allow both circles and diamonds. 所以我选择了D3的“d3.svg.symbol”,允许圆圈和钻石。
However, the problem I am facing is that by using D3's SVG Symbols I don't have access to manipulating the x axis specifically since it only allows translate. 但是,我面临的问题是,通过使用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";
}));
The code below from the fiddle shows the manipulation of the x axis for the zoom taken from the fiddle. 下面的代码显示了从小提琴中获取的缩放的x轴操作。 I want to do the same with translate if it's possible.
如果有可能的话,我想对翻译做同样的事情。
return svg.selectAll("rect.item")
.attr("x", function(d){return scale(d);})
The code below shows the way it works with SVG Circles and it shows the most logical way I thought to make the zoom work. 下面的代码显示了它与SVG Circles一起使用的方式,它显示了我认为使缩放工作最合理的方式。 But unfortunately it does not work.
但不幸的是它不起作用。
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);
Here is a fiddle edited with diamonds and circles. 这是一个用钻石和圆圈编辑的小提琴。 https://jsfiddle.net/g67cgt4w/
https://jsfiddle.net/g67cgt4w/
https://jsfiddle.net/62vq9h8p/ https://jsfiddle.net/62vq9h8p/
In update_events() function you can't use the "circleDiamond.item" as selector because you don't have <circleDiamond>
element - there is a <circle>
svg element that's why you can use "circle.myCircle" for example. 在update_events()函数中,你不能使用“circleDiamond.item”作为选择器,因为你没有
<circleDiamond>
元素 - 有一个<circle>
svg元素,这就是你可以使用“circle.myCircle”的原因。 You can set a better class like ".circle.diamond.item." 你可以设置一个更好的类,如“.circle.diamond.item”。 to select them.
选择它们。 So I changed this and also added
所以我改变了这一点,并补充说
var cy = d3.transform(d3.select(this).attr("transform")).translate[1];
return "translate(" + scale(d) + "," + cy +")";
This will keep the current Y positioning. 这将保持当前的Y定位。
d3.transform(d3.select(this).attr("transform"))
Takes current element's transform and .translate[1] takes the translate object and returns the Y value(which is the second item). 采用当前元素的变换,.translate [1]获取translate对象并返回Y值(这是第二项)。 You can take current X value if you get the 0 index instead.
如果获得0索引,则可以获取当前X值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.