如何在dimple.js中显示完整的xAxis标题？

Question

这是我的酒窝线图（由d3提供）： 但xAxis ltitle与xAxis标题重叠 像图像

如何显示完整的xAxis标题，而不是与xAxis文本重叠？

然后我在php文件中有这个代码：

var svg = dimple.newSvg("#chartContainer", 600, 400),
data = [
    { "Value" : 4, "timestamp" : 09:33:00},
    { "Value" : 10, "timestamp" : 09:33:05},
    { "Value" : 2, "timestamp" : 09:33:50},
    { "Value" : 1, "timestamp" : 09:34:00},
    { "Value" : 5, "timestamp" : 09:34:20},
    { "Value" : 6, "timestamp" : 09:35:00}
];


// Draw a standard chart using the aggregated data

var chart = new dimple.chart(svg, data);
chart.setBounds(60, 30, 700, 300);
var x = chart.addCategoryAxis("x", "timestamp");
 x.title = "per 5 seconds";
 x.addOrderRule("Year");
var y = chart.addCategoryAxis("y", "Value");
var s = chart.addSeries(["Volume", "timestamp"], dimple.plot.bubble);

// Add a thick line with markers
  var lines = chart.addSeries(null, dimple.plot.line);
  lines.lineWeight = 5;
  lines.lineMarkers = true;
  chart.draw();
  x.shapes.selectAll("text").attr("transform",
function (d) {
  return d3.select(this).attr("transform") + " rotate(45)";
});

有人可以帮我这个吗？是否有可能以我正在尝试的方式进行？ 如果你能指出一些有用的例子或教程，那将是很棒的

1：

Answer 1

您必须更改rotate(45)以设置自定义坐标。值得庆幸的是，使用rotate(45,0,0)根据您的需要设置0,0非常容易。特别是第二个参数可以上下移动标签。

这是一个试用它的工作笔。只需尝试使用rotate(45,-10,0)或rotate(45,10,0)查看会发生什么：

http://codepen.io/anon/pen/JEbKRN?editors=1111

（我随意将""添加到数组中的日期以使其正常工作）

以下是您可能搜索过的酒窝示例： http://dimplejs.org/examples_index.html

免责声明：我之前从未使用过凹坑，只是d3。可能有更好的＆＃34;酒窝＆＃34;但是，尽管你正在通过D3改变标签的旋转，但这可能是你最好的方式。

修改：

绘制图表后，您可以通过以下函数直接访问标题标签的x和y位置：

x.titleShape.attr("y",
    function (d) {
      return "420"; //you may want to calculate this dynamically.
    });

对于Codepen来说，目前似乎已经失败了，这里有一个工作小提琴： http://jsfiddle.net/kue2arnh/3/