标签: scaletransform

我有以下问题:我想在箱线图上可视化离散和连续变量,其中后者具有一些极高的值.这使得箱形图无意义(图表中的点甚至"主体"太小),这就是为什么我想以log10的比例显示它.我知道我可以忽略可视化中的极值,但我并不打算这样做.

让我们看一个钻石数据的简单例子:

m <- ggplot(diamonds, aes(y = price, x = color))

问题在这里并不严重,但我希望你能想象为什么我希望以log10的比例看到这些值.我们来试试吧:

m + geom_boxplot() + coord_trans(y = "log10")

正如您所看到的那样,y轴是log10缩放并且看起来很好但是x轴存在问题,这使得绘图非常奇怪.

问题不会发生scale_log,但这不是我的选择,因为我不能这样使用自定义格式化程序.例如:

m + geom_boxplot() + scale_y_log10() 

我的问题:有没有人知道在y轴上用log10刻度绘制boxplot的解决方案,标签可以用formatter这个线程中的函数自由格式化？

根据答案和评论编辑问题以帮助回答者:

我真正追求的是:一个log10转换轴(y)没有科学标签.我想将它标记为美元(formatter=dollar)或任何自定义格式.

如果我尝试@ hadley的建议,我会收到以下警告:

> m + geom_boxplot() + scale_y_log10(formatter=dollar)
Warning messages:
1: In max(x) : no non-missing arguments to max; returning -Inf
2: In max(x) : no non-missing arguments to max; returning -Inf
3: In max(x) : no non-missing arguments to max; …

我在Chrome和Safari中有一些奇怪的行为.我有一个scaled(transform: scale())容器,里面有视频和其他元素.在一些缩放中,具有高z指数的绝对定位元素消失并且不再返回.

我怎样才能解决这个问题？请注意,我不能给视频元素一个负z-index,我需要使用overflow: hidden;.

例

我做了一个例子,可以向上和向下扩展最外面的容器.在特定比例值处,具有类.on-top(和文本"I should always be on top.")的元素消失.当再次缩小时,它会突然出现.

链接到exmaple:https://jsfiddle.net/iafiawik/Lcox1ecc/

结论

• 看起来元素的大小很重要.我做得越大,它消失之前的比例值就越大.
• 我还测试了transform: scale(1.4)直接在元素上设置CSS,行为是一样的.

如果我这个问题不存在:

• 用div替换视频标签
• position: absolute;从兄弟姐妹中删除.on-top(即.below)
• overflow: hidden;从中移除.content
• 如果我移动.on-top,则将其放在文档流程中的视频标记之后

(但是当然,由于项目的具体原因,这些变通办法在现实中都不适用于我.我也不能给视频元素一个负面的z-index,我需要使用overflow: hidden;.)

来自社区的建议解决方法(谢谢!)

• 为视频标记提供负z-index(不能这样做,因为我有时会在视频后面放置元素)
• 删除overflow: hidden;(我无法删除overflow: hidden;)

浏览器

我在Chrome(Mac)和Safari(Mac)中看到了这个问题.

更新1

似乎这个错误报告几乎涵盖了我的问题.但是,它没有为它提供修复.

更新2

我通过提供解决这个问题的方法回答了我自己的问题.

更新3

有许多答案可以修改z-index视频或添加translateZ到.on-top元素.演示已经表明这两种方法都可以解决这个问题.但是,由于我的HTML结构是可视化HTML编辑器的输出(长篇故事......),我不知道它们将是什么元素,或者它们应该位于视频的前面,下面还是旁边.因此,我正在寻找一种解决方案,不需要更改缩放元素内的单个元素.

我正在重新提出这个问题,因为我上次没有得到太多回应,希望一些重新措辞可能会有所帮助......

基本上我要做的是创建一个数据绑定画布,它将自动缩放其内容以"填充"可用空间.有点像缩放以适应操作.不幸的是,我的WPF技能还不是很强,我正在努力研究如何做到最后这部分.我已经按照一些数据绑定示例来获取画布,但不确定是否可能是错误并阻碍了我.

根据我尝试和解决方案的方式,我现在有两个基本问题:

• 如果可能使用转换,我不知道如何通过XAML自动重新缩放画布.
• 我似乎无法在后面的代码中引用画布,我猜是因为它是ItemsControl的一部分？

我想要实现的一个例子,我有AI想要尝试获得B:

(删除过期链接到img)

我目前使用的代码非常简单,只需使用给定的坐标创建4个点,并使用另一个视图模型将其包装起来.

public class PointCollectionViewModel
{
    private List<PointViewModel> viewModels;
    public PointCollectionViewModel()
    {
        this.viewModels = new List<PointViewModel>();
        this.viewModels.Add(new PointViewModel(new Point(1, 1)));
        this.viewModels.Add(new PointViewModel(new Point(9, 9)));
        this.viewModels.Add(new PointViewModel(new Point(1, 9)));
        this.viewModels.Add(new PointViewModel(new Point(9, 1)));
    }

    public List<PointViewModel> Models
    {
        get { return this.viewModels; }
    }
}

public class PointViewModel
{
   private Point point;
   public PointViewModel(Point point)
   {
       this.point = point;
   }

   public Double X { get { return point.X; } }
   public Double Y …

我正在尝试做的很简单:将一些SVG点缩放scale(0)到scale(1)使用vanilla js悬停兄弟元素时.它们是演示中的红色

这是基本的SVG设置

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
      x="0px" y="0px" viewBox="0 0 720 576" style="enable-background:new 0 0 720 576;" xml:space="preserve">
    <style type="text/css">
        .st3 {
            fill:red;
        }
        * {
            -webkit-transition:.3s;
            transition:.3s;
        }
    </style>
    <g id="Layer_4">
        <!-- Shield -->
        <path class="st8" d="M601,304.7c-32.4-15.4-68.6-24-106.8-24c-40.4,0-78.5,9.6-112.3,26.6c4.9,79.7,41.9,146.7,109.5,187.6
            C559.8,454.1,597,385.6,601,304.7z" />
        <path class="st9" d="M420.1,328.7c2.1-4.7,32.5-23.9,72.5-23.9c39.9,0,73.1,20,75.5,24.3c2.4,4.3,5.7,40-12.7,74.6
                c-19.7,36.9-53.5,50.1-61.8,50.4c-6.4,0.2-41.8-14.3-62.5-51.6C411.5,367.4,418,333.4,420.1,328.7z" />
        <circle class="st10" cx="494.9" cy="373.3" r="35.5" />
    </g>
    <g id="Layer_8">
        <!-- Dots on shield -->
        <circle class="st3" cx="578.8" …

实例:https://jsfiddle.net/b8vLg0ny/

可以使用CSS scale和translate函数来放大元素.

以这个例子为例,在2x2网格中有4个方框.

HTML:

<div id="container">
  <div id="zoom-container">
    <div class="box red">A</div>
    <div class="box blue">B</div>
    <div class="box green">C</div>
    <div class="box black">D</div>
  </div>
</div>

CSS:

* { margin: 0; }

body, html { height: 100%; }

#container {
  height: 100%;
  width: 50%;
  margin: 0 auto;
}

#zoom-container {
  height: 100%;
  width: 100%;
  transition: all 0.2s ease-in-out;
}

.box {
  float: left;
  width: 50%;
  height: 50%;
  color: white;
  text-align: center;
  display: block;
}

.red { background: …

我试图使用iCarousel作为我的解决方案,我需要实现类似下图的内容

应该是这样的

iCarouselOptionFadeMin iCarouselOptionFadeMax iCarouselOptionFadeRange iCarouselOptionFadeMinAlpha 使用

- (CGFloat)carousel:(iCarousel *)carousel valueForOption:(iCarouselOption)option withDefault:(CGFloat)value

我试着创建一个完全相同的函数

- (CGFloat)alphaForItemWithOffset:(CGFloat)offset

我发现它可以使用offset价值观来完成,但事情并没有对我有用,任何人都可以帮我实现这个目标吗？

谢谢.

我正在尝试在单击所述图像视图时为ImageView设置动画.

具体来说,我希望ImageView的大小变大(比如.20更大)并立即缩小回原始大小).

到目前为止,我一直在试验这段代码而没有运气.

// thumbLike is the imageView I would like to animate.
button.setOnClickListener(new OnClickListener(){
    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        ScaleAnimation scaleAnim = new ScaleAnimation(1.0f, 2.5f, 1.0f, 2.5f,
                                    Animation.RELATIVE_TO_SELF, 0.5f,
                                    Animation.RELATIVE_TO_SELF, 0.5f);
        scaleAnim.setInterpolator(new LinearInterpolator());
        scaleAnim.setDuration(1500);
        thumbLike.startAnimation(scaleAnim);
        thumbLike.setAnimation(null);
    }
});

任何人都可以建议我一个可能的解决方案

编辑#1

正如Hardik4560所回答的那样,它正在通过XML工作:

// finally i use this code to execute the animation
Animation animationScaleUp = AnimationUtils.loadAnimation(this, R.anim.scale_up);
Animation animationScaleDown = AnimationUtils.loadAnimation(this, R.anim.scale_down);

AnimationSet growShrink = new AnimationSet(true);
growShrink.addAnimation(animationScaleUp);
growShrink.addAnimation(animationScaleDown);
thumbLike.startAnimation(growShrink);

和XML

SCALE_UP
<?xml version="1.0" …

我正在使用d3编写甘特图

我有带时间刻度的xScale(时间)

this.xScale = d3.scaleTime()
            .domain([this.startDate,this.endDate])
            .range([0,this.getWidth()]);

和yScale作为Band Scale(资源)

this.yScale = d3.scaleBand()
        .domain(resources.map(function(res){
            return res.res_num;
        }))
        .rangeRound([0,this.getHeight()])
        .paddingInner(.3)

问题是我需要将任务(SVG Rect)从一个资源拖放到另一个资源

当我拖动我正在使用transfrom所以它在SVG上移动

_onDrag : function(d)
    {
        var x = d3.event.dx+d3.event.x;
        var y = d3.event.dy+d3.event.y;
        d3.select(this).raise().attr("transform","translate(" + [x,y] + ")");
    },

但是在下降时我必须处理如下逻辑:

1. rect不应该在资源之间,因此需要转换为基于d3.event.y的任何band
   2. 在xAx中,时间刻度具有反转但yScale没有这个.这该怎么做？

我试图缩放div,但保持内部元素在相同的位置和相同的大小.为此,我使用transform: scale(value)包装器和transform: scale(1/value)内部div.

问题是,当我改变比例时,内部div会发生变化.只有当包装纸的宽度/高度为奇数或不是整数时才会发生这种情况.对于包装器的均匀宽度/高度不会发生这种情况.

我的目标是让许多包装器的子元素与包装器一起缩放,但只有一个不包装.

看看这个例子,看看行动中的问题(悬停到比例).

示例没有问题,内部元素保持固定(容器的高度和宽度均匀):

https://jsfiddle.net/o16rau6u/5/

.wrapper {
  width: 200px;
  height: 200px;
  background-color: blue;
  position: relative;
}

.bg {
  width: 20px;
  height: 20px;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.wrapper:hover {
  transform: scale(2);
}

.wrapper:hover .bg {
  transform: scale(0.5);
}

<div id="wrapper" class="wrapper">
  <div id="bg" class="bg"></div>
</div>

有问题的例子,内部元素在比例上移动一点(容器的高度和宽度是奇数):

https://jsfiddle.net/o16rau6u/6/

.wrapper {
  width: …

我必须使用变换矩阵来动画变换:元素的比例.

我想从0扩展到1.如果我使用以下代码它可以正常工作:

.container {
    width: 200px;
    height: 100px;
    background: yellow;
    transform: scale(0);
    transition: transform 1s;
}
.container.open {
    transform: scale(1);
}

https://jsfiddle.net/w4kuth78/1/

如果我用的是矩阵本身,它是不工作的.

.container {
    width: 200px;
    height: 100px;
    background: yellow;
    transform: matrix(0, 0, 0, 0, 0, 0);
    transition: transform 1s;
}
.container.open {
    transform: matrix(1, 0, 0, 1, 0, 0);
}

https://jsfiddle.net/m7qpetkh/1/

我做错了什么或者这不起作用？我想知道,因为它在Chrome和Firefox中不起作用......

console_log调试输出表示在从0到1的缩放时,矩阵也从矩阵(0,0,0,0,0,0)到矩阵(1,0,0,1,0,0)设置.

编辑:

完全混淆......如果我将矩阵中的scaleX和scaleY值更改为0.1或0.01,它就可以工作......哇