SVG шкала () для края - PullRequest
Новая
       54

SVG шкала () для края

1 голос
/ 07 октября 2019

У меня есть код, который использует команду масштаба. Это прекрасно работает для 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 сделает nth. 

<!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>

1 Ответ

1 голос
/ 07 октября 2019

Создайте <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');
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="example" style="width:1000px;"></div>
...