4

我认为这是 Chrome 中的一个错误，因为它似乎在 Firefox 中运行良好，但我希望有人可以推荐一个解决方法（或者如果这是我的错，请告诉我哪里出错了）。

我正在尝试以与此示例类似的方式将标签放入和弦图的组弧中： http: //bost.ocks.org/mike/uberdata/：

在此处输入图像描述

我正在使用textPath来实现这一点，就像示例一样。我的情况的不同之处在于，我正在运行转换以在创建弧时打开弧，并在数据更改时调整它们的大小。path当我对 by 引用使用过渡时textPath，结果是文本不会立即显示在 Chrome 上。它按预期存在于 DOM 中，当我执行诸如调整浏览器缩放之类的操作时，文本会弹出到视图中。

这是一些显示问题的示例代码：http: //bl.ocks.org/3148920

如果我在路径转换上设置一个transition.each("end",...)并触摸 textPath 上的一个属性，它会使文本出现。但是，当我调整弧线的大小时，这对我没有帮助，在此期间我希望文本与路径一起浮动。在 Firefox 上这是可行的，但在 Chrome 上，文本只是保持不变。

关于如何让它发挥作用的任何想法？

4

1 回答 1

11

我在这里分叉并修复了您的示例：

您在 WebKit 浏览器中触发了两个错误：

  • 由于 WebKit 处理区分大小写的元素名称的方式存在错误，您无法选择 textPath 元素。请参阅错误 83438。不幸的是，WebKit 没有显示修复此错误的迹象。

  • 更新路径元素本身不会触发对引用此路径的依赖元素的重绘。因此，即使我们更新了路径，引用的 textPath 元素也不会被重绘。为了解决这个更新错误，我们创建了一个自定义转换，重复将 textPath 的 xlink:href 属性设置为“#path”。我不确定是否已经为此提交了错误。

注意：文本在动画开始的弧线开始处被卷曲，难以阅读。根据您要完成的任务，您可以改为使用弧线来剪辑文本，以便在弧线扩展时显示文本。

于 2012-07-20T15:20:56.527 回答