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

这是我的酒窝折线图（由d3提供动力）： 但是xAxis的标题与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)";
});

有人能帮我吗？有可能用我正在尝试的方式来做吗？ 如果你能给我指出一些已经完成的例子或教程，那就太好了

---

：

您必须更改

旋转（45）

以设置自定义坐标。谢天谢地，通过使用

rotate（45,0,0）

可以很容易地做到这一点，您可以根据需要设置0,0。尤其是第二个参数会上下移动标签

这里有一支可以用的钢笔来试试。只需尝试使用

rotate（45，-10,0）

或

rotate（45,10,0）

查看发生了什么：

（我可以随意在数组中的日期中添加

”

，以使事情顺利进行）

以下是您可能搜索到的酒窝示例：

免责声明：我以前从未使用过酒窝，只是d3。可能有更好的“酒窝”方式，但尽管您正在通过D3 nontheless更改标签的旋转，但这可能是最适合您的方式

编辑：

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

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

由于codepen目前似乎处于低谷状态，这里有一把工作小提琴：

---

为什么不把JSON对象放进去，然后用ajax发布它呢？从你的代码笔来看，xAxis标题“每5秒”将与xAxis文本重叠，如何将标题移动到xAxis文本的底部？但是我尝试如果数据集只有两条记录，x位置仍然可以显示完整的x值，如