D3. Почему мой групповой перевод не работает?

Question

Моя цель - перевести группу элементов svg с переводом. Это не работает. Вот код:

Создать SVG контейнер

// create svg container 
canvas = d3.select("body").append("svg") 
    .attr("width", canvasBBox.width) 
    .attr("height", canvasBBox.height); 

Append перевод х = 200, Y = 200

// apply a transform 
canvas.append("g") 
    .attr("transform", function(d) { return scarpa.translate(200, 200); }); 

Добавить коробку

// render a background 
    canvas.append("rect") 
     .attr("x", 0) 
     .attr("y", 0) 
     .attr("width", canvasBBox.width) 
     .attr("height", canvasBBox.height) 
     .style("opacity", 1) 
     .style("fill", function(d) { return scarpa.rgb_SVG(0,255,0); }); 

Добавить y ось

// render y-axis 
canvas.append("g") 
    .attr("class", "y axis") 
    .append("line") 
    .attr("stroke", function(d) { return scarpa.grey_SVG(64); }) 
    .attr("x1", histogram.xScale(0)) 
    .attr("y1", 0) 
    .attr("x2", histogram.xScale(0)) 
    .attr("y2", canvasBBox.height); 

Коробка + ось оси y никогда не переводит. Для проверки здравомыслия я применил направление перевода к коробке, и оно действительно переводилось. Вздох.

Я предполагаю, что групповой перевод подразумевает, что локальная система координат внутри с x = y = 0 будет началом переводимой рамки координат. Нет? Что мне здесь не хватает?

Answer 1

Проблема заключается в том, что функция .append() не изменяет выделение, которое она вызывается, но возвращает новый выбор.

Поэтому g элемент добавляемый к svg и rect получает также добавляется к svg и не внутри переведенного g элемента. Вы должны увидеть это, если вы проверите вывод svg.

Есть два возможных решения: 1: Если вы хотите перевести все, добавьте g элемент в первом заявлении, например, так:

var canvas = d3.select("body").append("svg") 
    .attr("width", canvasBBox.width) 
    .attr("height", canvasBBox.height) 
    .append("g") 
    .attr("transform", function(d) { return scarpa.translate(200, 200); }); 

canvas.append("rect") 
    .attr("x", 0) 
    .attr("y", 0) 
    .attr("width", canvasBBox.width) 
    .attr("height", canvasBBox.height) 
    .style("opacity", 1) 
    .style("fill", function(d) { return scarpa.rgb_SVG(0,255,0); }); 

canvas.append("g") 
    .attr("class", "y axis") 
    .append("line") 
    .attr("stroke", function(d) { return scarpa.grey_SVG(64); }) 
    .attr("x1", histogram.xScale(0)) 
    .attr("y1", 0) 
    .attr("x2", histogram.xScale(0)) 
    .attr("y2", canvasBBox.height); 

2: Если вы хотите добавить что-то за пределами переведенный группа, назначить групповой отбор в новую переменную следующим образом:

var canvas = d3.select("body").append("svg") 
    .attr("width", canvasBBox.width) 
    .attr("height", canvasBBox.height); 

var canvasGroup = canvas.append("g") 
    .attr("transform", function(d) { return scarpa.translate(200, 200); }); 

canvasGroup.append("rect") 
    .attr("x", 0) 
    .attr("y", 0) 
    .attr("width", canvasBBox.width) 
    .attr("height", canvasBBox.height) 
    .style("opacity", 1) 
    .style("fill", function(d) { return scarpa.rgb_SVG(0,255,0); }); 

canvasGroup.append("g") 
    .attr("class", "y axis") 
    .append("line") 
    .attr("stroke", function(d) { return scarpa.grey_SVG(64); }) 
    .attr("x1", histogram.xScale(0)) 
    .attr("y1", 0) 
    .attr("x2", histogram.xScale(0)) 
    .attr("y2", canvasBBox.height);