3

I want to zoom in my nodes in the following way shown by this fiddle. http://jsfiddle.net/HF57g/2/

Fiddle Source: How to zoom in/out d3.time.scale without scaling other shapes bound to timeline

With the help of the fiddle, I was able to apply the zoom with SVG Circles.

Note: The code below shows that by using SVG Circles you are provided with an x and y axis attribute.

.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.

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.

.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. 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. 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/

Community
  • 1
  • 1
helloGoodDay
  • 69
  • 2
  • 9
  • can you implement what you have tried to a fiddle ? – thatOneGuy May 24 '16 at 08:06
  • In your fiddle, you have a commented-out section that includes the following as part of a change to the `transform` attribute: `scale(" + d3.event.scale+", 1)`. Instead of "1" (i.e. no change in the y axis), does changing it to `scale(" + d3.event.scale + "," + d3.event.scale + ")` not give what you're trying to accomplish? (Perhaps I'm misunderstanding the question, though ... I'm seeing squares instead of diamonds, after all). – Max Starkenburg May 24 '16 at 15:56
  • @thatOneGuy Here you go. https://jsfiddle.net/g67cgt4w/ – helloGoodDay May 25 '16 at 09:04
  • @MaxStarkenburg Thank you for your response. The fiddle I referenced is not my personal work. I tried to include return svg.selectAll("circleDiamond.item") .attr("transform", function(d) { return "translate(" + scale(d) + ",0)scale(" + d3.event.scale + "," + d3.event.scale + ")"; }) } in the update events function, but it does not work. – helloGoodDay May 25 '16 at 09:56
  • Thank you thatOneGuy and Max Sarkenburg for taking your time to help me. – helloGoodDay May 25 '16 at 10:07

1 Answers1

2

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. You can set a better class like ".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. 

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). You can take current X value if you get the 0 index instead.

Ivan Kovachev
  • 402
  • 5
  • 12
  • Thank you so much @Ivan Kovachev – helloGoodDay May 25 '16 at 10:00
  • Thank you Ivan for your detailed explanation. It is very helpful to me and hopefully to others who want to learn and who face the same problem. Cheers! – helloGoodDay May 25 '16 at 10:05
  • Hi Ivan, I'm trying to implement this section. var cy = d3.transform(d3.select(this).attr("transform")).translate[1];return "translate(" + scale(d) + "," + cy +")"; in Version 4 of D3. I used the function made by this person (http://stackoverflow.com/questions/38224875/replacing-d3-transform-in-d3-v4) The closest I got is getTranslation("translate(0,0)")[1] But it doesn't work properly. Any advice? – helloGoodDay Aug 12 '16 at 11:15
  • Edit: I got as far as var cy = getTranslation(d3.select(this).attr("transform"))[1]; return "translate(" + d.x + "," + cy +")"; It doesn't move :( – helloGoodDay Aug 12 '16 at 11:45
  • Honestly, I still haven't played with v4. – Ivan Kovachev Aug 17 '16 at 14:15