Question

我在x轴上有一个日期图表。现在我想添加时间并将其放在每个刻度日期下面的行上，因为每个刻度的文本在日期和时间都相当宽。

通过查看下面的问题建议，我试了一下：

var xMainScale = d3.scale.linear()
   .domain([0,100])
   .range([20, 600]);

//--- date format
var formatAsDate = function(d) {var md = new Date(d*1000);
   md_utc=new Date(md.getUTCFullYear(), md.getUTCMonth(),
   md.g etUTCDate(),  md.getUTCHours(), md.getUTCMinutes(), md.getUTCSeconds());
   return md_utc.format("Y-m-d H:i:s");};

//--- label on several rows
var insertLinebreaks = function (d) {
var el = d3.select(this);
var words = d.split(' ');
el.text('');

for (var i = 0; i < words.length; i++) {
  var tspan = el.append('tspan').text(words[i]);
  if (i > 0)
    tspan.attr('x', 0).attr('dy', '15');
 }
};

//===== axis
var xMainAxis = d3.svg.axis()
  .scale(xMainScale)
  .orient("bottom")
  .ticks(5)
  .tickFormat(formatAsDate);

//====== create SVG element
var chart = d3.select("body")
  .append("svg:svg")
  .attr("width", w)
  .attr("height", h)
  .attr("id","chart")
  .attr("class","chart");

//==== main chart (there are more but I left them out here)
var main = chart.append('g')
  .attr('transform', 'translate(' + 25 + ',' + 25 + ')')
  .attr('width', w)
  .attr('height', main_h)
  .attr('class', 'main')
  .attr('id', 'mainchart');

//===== create x axis
main.append("g")
  .attr("id","main_x")
  .attr("class", "x_axis")
  .attr("transform", "translate("+0+"," + (700 - 25)  + ")")
  .call(xMainAxis);

在功能方面有点失落：

//----- update the axis
main.select('#main_x').call(xMainAxis);
main.selectAll('#main_x g text').each(insertLinebreaks);

由于我的代码相当大，我已经完成了我认为重要的部分。我想我将错误的对象传递给insertLinebreaks函数，但是我应该传递什么呢？

/拉斯

Answer 1

感谢@Lars Kotthoff帮助我找到解决方案。

通过将insertLinebreakes函数更改为：

var insertLinebreaks = function (d) {
  var el = d3.select(this);
  var words=d3.select(this).text().split(' ');

  el.text('');

  for (var i = 0; i < words.length; i++) {
var tspan = el.append('tspan').text(words[i]);
if (i > 0)
      tspan.attr('x', 0).attr('dy', '15');
  }
 };

有效。

d3.js：轴上每个刻度的双行文本？

1 个答案: