D3 - Масштабирование с символами SVG D3

Question

Я хочу увеличить мои узлы следующим образом, показанным этой скрипкой. http://jsfiddle.net/HF57g/2/

Fiddle Источник: 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.svg.symbol» D3, в, чтобы оба круга и алмазы.

Однако проблема, с которой я сталкиваюсь, заключается в том, что с использованием символов SVG от D3 у меня нет доступа к управлению осью х именно потому, что она позволяет только переводить.

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

Вот скрипка с бриллиантами и кругами. 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 (который является вторым пунктом). Вы можете взять текущее значение X, если вместо этого вы получите индекс 0.