3

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 関数に間違ったオブジェクトを渡しているようですが、代わりに何を渡す必要がありますか?

/ラーズ

4

1 に答える 1

4

解決策を見つけるのを手伝ってくれた@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');
  }
 };

できます。

于 2013-10-18T13:40:06.307 に答える