Adobe Edge Animate 和 d3.js：d3.scale.range([value]) 在 Chrome 和 Safari 中无法正常工作答案

【问题标题】：Adobe Edge Animate and d3.js: d3.scale.range([value]) not working properly in Chrome and SafariAdobe Edge Animate 和 d3.js：d3.scale.range([value]) 在 Chrome 和 Safari 中无法正常工作
【发布时间】：2013-12-15 22:06:14
【问题描述】：

我正在尝试使用 Adobe Edge Animate 和 d3.js 创建条形图。

我在不同浏览器如何显示坐标轴方面遇到了一些困难。这是一个仅包含轴且没有数据的 d3 图表的链接（代码在 d3example2_edgeActions.js 中）：

http://www.nyhetsgrafikk.no/demo/d3example2/d3example2.html

Mozilla Firefox 和 Opera：一切正常
Chrome 和 Safari：刻度在左侧堆叠在一起

我相信这与 d3.scale.range([value]) 无法正常工作有关——尽管它确实设置了图表的范围（当我更改范围并运行代码时，我的图表已更改），蜱虫堆叠在一起。 Chrome 没有返回任何错误。关于如何解决此问题的任何想法？

【问题讨论】：

听起来这与 Adobe 的关系比与 D3 的关系更大——通常你不会对这样的图表有那么多问题。你试过只在 D3 中这样做吗？
不，我没有，我工作的公司使用 Adobe Edge Animate 进行所有交互，所以虽然我可能偶尔不使用它，但我'而是想办法将两者结合起来。不是 Edge Animate 的忠实粉丝，但必须使用它。
您是否在这些浏览器中仅尝试过 Adobe SVG 以查看是否可行？
不，很好，拉斯。明天会这样做，看看情况如何。谢谢
看起来是我的轴代码中的.range([values]) 导致了问题。在 Firefox 和 Safari 中它可以工作，但在 Chrome 和 Safari 中，刻度线显示但都位于左侧的顶部 - 有没有办法分解范围或以不同的方式编写它？

标签： javascript d3.js cross-browser transform adobe-edge

【解决方案1】：

原来范围不是问题。通过将 webkit-transform 添加到我的刻度和轴文本中，现在一切正常

.style("-webkit-transform", function(d){ return "translate(" + 0 + "px," + y(d) + "px)"; });

如果您尝试使用边缘动画创建 d3 饼图，并且可能在您使用 transformwebkit-transform 也可以解决问题/strong> 在 d3 中。您可能还想添加一个 ms 转换： http://www.w3schools.com/css/css3_2dtransforms.asp

【讨论】：