Question

实现如下的响应式SVG元素非常简单。

<div id="chartId"/>

var svg = d3.select("#chartId")
            .append("svg")
            .attr("preserveAspectRatio", "xMinYMin meet")
            .attr("viewBox", "0 0 600 400");

svg.append("rect")
    .attr("fill","blue")
    .attr("x", 10)
    .attr("y", 10)
    .attr("width", 500)
    .attr("height", 500);

JSFIDDLE

当窗口大小缩小时会发生以下情况。

缩小之前

收缩后

可以看出，矩形角度是水平和垂直响应的。

但是，如何实现仅水平响应并发生以下情况的SVG元素？

一个选项是每次更改窗口大小时重绘SVG元素，但我想知道是否有更复杂的解决方案可用。

Answer 1

preserveAspectRatio属性确定用于适合svg中viewBox的缩放和对齐。当preserveAspectRatio =“xMinYMin meet”时，内容被均匀缩放（即，以相同的比例缩放水平和垂直）。当preserveAspectRatio =“none”时，内容将不均匀地缩放。在您的代码中，更改...

public class DragListener extends MouseInputAdapter
{
    Point location;
    MouseEvent pressed;

    public void mousePressed(MouseEvent me)
    {
        pressed = me;
    }

    public void mouseDragged(MouseEvent me)
    {
        Component component = me.getComponent();
        location = component.getLocation(location);
        int x = location.x - pressed.getX() + me.getX();
        int y = location.y - pressed.getY() + me.getY();
        component.setLocation(x, y);
     }
}

为...

DragListener drag = new DragListener();
component.addMouseListener( drag );
component.addMouseMotionListener( drag );

Answer 2

前段时间，我对响应式D3非常感兴趣，现在我有点迟钝，但无论如何这里都是答案。它并不那么复杂。只需将'％'作为svg的宽度尺寸，将固定的尺寸作为高度。

请注意，使用'％'时，实际尺寸与父元素的尺寸相同。你需要考虑到这一点。

这是我从你的小提琴中取出并调整它的代码：

var svg = d3.select("#chartId")
            .append("svg")
            .attr("width", "100%")
            .attr("height", "200");


svg.append("rect")
    .attr("fill","blue")
    .attr("x", 10)
    .attr("y", 10)
    .attr("width", '100%')
    .attr("height", '100%');

它有效，我试过了，但我不确定它是否真的是你想要的......

D3：如何实现水平响应SVG元素？

2 个答案: