D3.js D3。为什么我的小组翻译不起作用？

我在这里的目标是用翻译来翻译一组svg元素。它不起作用。代码如下：

创建SVG容器

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

附加x=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内的局部坐标系将是平移坐标系的原点。不这里缺少什么？

问题是，

.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:如果要在翻译组之外追加内容， 将groupselection分配给一个新变量，如下所示：

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

---

如果仔细观察，您会发现我通过方法链接将前两条语句组合成一条语句。这样，返回的

append（“g”）

选择，而不是带有

append（“svg”）

的选择将存储在

画布

中。实际上，嵌套的转换解决方案是2而不是1。我试过了，效果很好。请为正在阅读的其他人更改。干杯。哦，我明白了，解决方案1在第三行有一个分号，不应该在那里。我删除了分号，现在这两个解决方案都应该通过将元素嵌套在被转换的

g

元素中来完成这项工作