Question

我有使用scale()命令的代码。

这非常适合chrome和mozilla。

这不适用于边缘，我提供了一些代码，因此您可以轻松重现该问题。

我正在尝试手动执行。我已经在需要进行大量计算的过程中感到痛苦。

有更好的方法吗？

我只反转x和y。

scale(1,-1)
scale(-1,-1)
scale(1,1)
scale(-1,1)

有什么技巧可以实现此功能？

最终结果应适用于边缘。

示例：

在svg属性中，尝试更改scale(-1, -1)-> scale(1,1)。 Chrome会反转轴，而edge则无能为力。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.js" integrity="sha256-3BMRAc+yX0neFRvyfGGfd3aZK8NKwYTOzq93ubNY2iU=" crossorigin="anonymous"></script>
</head>
<body>
    <div id="example" style="width:1000px;">

    </div>    
</body>
<script>
    const svg = d3.select('#example')
                  .append('svg')
                  .attr('width', '100%')
                  .attr('height', '500%')
                  .attr('transform', 'scale(-1,-1)');

    svg.append('rect')
        .attr('id', 'example-1')
        .attr('width', '20%')
        .attr('height', '30%')
        .attr('x', '10%')
        .attr('y', '20%')
        .attr('fill','red');

    svg.append('rect')
        .attr('id', 'example-1')
        .attr('width', '20%')
        .attr('height', '30%')
        .attr('x', '30%')
        .attr('y', '20%')
        .attr('fill','blue');
    svg.append('rect')
        .attr('id', 'example-1')
        .attr('width', '20%')
        .attr('height', '30%')
        .attr('x', '10%')
        .attr('y', '40%')
        .attr('fill','yellow');
    svg.append('rect')
        .attr('id', 'example-1')
        .attr('width', '20%')
        .attr('height', '30%')
        .attr('x', '30%')
        .attr('y', '40%')
        .attr('fill','orange');

</script>
</html>

Answer 1

创建一个+-----+-------+---+ |price| status| id| +-----+-------+---+ | 4.4$|offline| 1| | 3.4$|offline| 2| | 3.4$| online| 2| | 4.4$| online| 1| +-----+-------+---+子元素并对其进行缩放。

我添加了一个转换，因此您仍然可以在示例中看到输出，并且我将所有id值都设为唯一。

<g>

const svg = d3.select('#example')
                  .append('svg')
                  .attr('width', '100%')
                  .attr('height', '500%')

    const g = svg.append('g')
        .attr('transform', ' translate(500, 100) scale(-1,-1)');
    g.append('rect')
        .attr('id', 'example-1')
        .attr('width', '20%')
        .attr('height', '30%')
        .attr('x', '10%')
        .attr('y', '20%')
        .attr('fill','red');

    g.append('rect')
        .attr('id', 'example-2')
        .attr('width', '20%')
        .attr('height', '30%')
        .attr('x', '30%')
        .attr('y', '20%')
        .attr('fill','blue');
    g.append('rect')
        .attr('id', 'example-3')
        .attr('width', '20%')
        .attr('height', '30%')
        .attr('x', '10%')
        .attr('y', '40%')
        .attr('fill','yellow');
    g.append('rect')
        .attr('id', 'example-4')
        .attr('width', '20%')
        .attr('height', '30%')
        .attr('x', '30%')
        .attr('y', '40%')
        .attr('fill','orange');

SVG scale（）无法在Edge（而非Edge Chronium）上运行

示例：

1 个答案: