Question

我已经设置了一些代码来进行缩放和移动，但是看来，一旦有了新的转换，旧的转换就被删除了吗？如何移动和缩放路径？

var path = svg.append('path')
    .attr('d', function(d) {
        var x = 100, y = 100;
        return path;
    })
    .style("fill", "#1a5d18")
    .attr("transform", "translate(300,0)");

var path = path.attr("transform","scale(.3)");

Answer 1

您已经知道，设置新的const express = require('express') // Create express instnace const app = express() // Require API route const sms = require('./routes/sms') // Import API Routes app.use(sms) // Export the server middleware module.exports = { path: '/api', handler: app }将覆盖前一个。

让我们在这个基本演示中看到这一点：

transform

const circle = d3.select("circle");
circle.attr("transform", "translate(100,50)");
circle.attr("transform","scale(.3)");

您可以看到（实际上，您看不到！），我们将圆移到<script src="https://d3js.org/d3.v5.min.js"></script> <svg> <circle r="50"></circle> </svg>，但是100,50使圆回到原来的位置

一个可能的解决方案是获取先前的scale(0.3)值。不幸的是，D3 v4和v5不再具有transform，但可以替换，如this answer中所述。

但是，在特定情况下，您可以直接在DOM元素中使用getAttribute并添加d3.transform来获得先前的translate值。 / p>

这是演示：

scale

const circle = d3.select("circle");
circle.attr("transform", "translate(100,50)");
circle.attr("transform", function() {
  return this.getAttribute("transform") +
    " scale(0.3)";
});

翻译后缩放路径对象

1 个答案: