避免d3轴标签中的dx / dy属性

时间:2015-02-06 12:51:27

标签: javascript svg d3.js

导出SVG文件并在Corel Draw(某些旧版本)中打开时,我遇到了文本元素位置的问题。我通过将每个dx / dy属性设置为零来修复它,并将其值添加到相应的x / y属性。

我编写了一个辅助函数,在我使用的每个文本元素上都使用.each调用。

transformDXYtoXY: function(d, i) {
    var that = d3.select(this);

    var y = that.attr("y") == null ? 0 : parseFloat(that.attr("y"));
    var dy = that.attr("dy") == null ? 0 : parseFloat(that.attr("dy"));
    that.attr("y", y + dy);
    that.attr("dy", 0);

    // doing the same with dx/x
    ...
},

这很有效,直到我决定在输入更改时转换轴而不是重绘它们:

axis = d3.svg.axis().scale(someScale);
d3.select('.axis')
    .transition()
    .call(axis)
    .selectAll("text")
    .each(transformDXYtoXY);

如果没有调用transformDXYtoXY(),则刻度标签位置关闭 y/dy属性未设置,即使我在transformDXYtoXY()内检查它,它似乎也没问题。

有没有办法告诉d3避免使用dx/dy?看起来问题发生在transition()期间。

1 个答案:

答案 0 :(得分:1)

dxdy属性的使用在D3的源代码中是硬编码的 - 改变它将是一项重大工作。但是,这是一个简单的解决方法。 D3过渡允许您设置listener for the end of the transition。您可以利用它来运行代码来修复属性值(对现有代码的更改很少):

d3.select('.axis')
  .transition()
  .call(axis)
  .selectAll("text")
  .each("end", transformDXYtoXY);

为了澄清,您目前使用的代码在设置转换后立即运行函数来立即修复属性,然后运行并覆盖属性值。上面的代码在转换完成后运行该函数,即不会发生进一步的属性更改。