如何在 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

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

编辑:

绘制图表后可以通过以下函数直接获取标题标签的x-和y-position:

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

for codepen 目前似乎已关闭，这是一个有效的 fiddle： http://jsfiddle.net/kue2arnh/3/

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

How to show full xAxis title in dimple.js?

javascript

dimple.js