1

折れ線グラフの作成方法に関するd3.jsチュートリアルに従いましたが、Chrome（v24.0.1312.56）では正常に機能/表示されますが、Safari（v6.0.2（7536.26.17））では正しく表示されません。Safariでは、軸は正しく表示されますが、線自体の端点はsvgの外側にプロットされ、キャンバス全体に引き伸ばされます。あなたはここでそれを見ることができます：

http://www.npcompleteheart.com/post/time-series-ptting-d3js/

また、コードをjsfiddleに配置しましたが、今すぐ機能させる方法がわかりません（初めて使用する場合）：http： //jsfiddle.net/hFRZx/15/

jsfiddleの唯一の変更点は、実際のjsonファイルの場所の代わりにデータ変数があることです。

私が試してみました：

  • 線上に円をプロットせず、ほろ酔いを取り除く
  • SVGは元々divに追加されていましたが、高さと幅が設定されたHTMLでsvgを使用するように切り替えました。次に、グラフ作成時の高さと幅を「100％」に設定します。

私が知っているのは、パスの値がChromeとSafariで同じではないということです。残念ながら、コード内のパスをプロットするのはこの行しかないため（それほど多くはありません）、理由については行き詰まっています。

 graph.append("svg:path").attr("d", line1(data)).attr("class", "data1");

グラフ作成に関連するコードは次のとおりです。

var dates = [];
var data = [];
var pointRadius = 1.75;

$.getJSON("/json/file/location.json", function(json) {
  $.each(json, function(key,value) {
    data.push(value)
    var eptime = new Date(parseFloat(key) * 1000)
    dates.push(eptime)
   });

  var margin = 110
  var m = [margin/3.5, margin, margin/3.5, margin]; // margins
  var w = 800 - m[1] - m[3];     // width
  var h = 500 - m[0] - m[2]; // height

  var x = d3.time.scale().domain([dates[0], dates[dates.length -1]]).range([0, w]);
  x.tickFormat(d3.time.format("%Y-%m-%d-%H-%M"));
  var digitLength = 100000
  var y = d3.scale.linear()
    .domain([Math.floor(d3.min(data, function(d) { return d; })/digitLength)*digitLength, 
                        d3.max(data, function(d) { return d; })])
    .range([h,0]);

  var line1 = d3.svg.line()
    .x(function(d,i) { 
            return x(dates[i]);
    })
    .y(function(d) { 
            return y(d);
    })
  var graph = d3.select("#timeseries_main")
                            .attr("width", w + m[1] + m[3])
                            .attr("height", h + m[0] + m[2])
                          .append("svg:g")
                            .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
  var xAxis = d3.svg.axis().scale(x).ticks(9).tickSize(-h).tickSubdivide(1);

  graph.append("svg:g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + h + ")")
      .call(xAxis);


  var yAxisLeft = d3.svg.axis().scale(y).ticks(7).orient("left");
  graph.append("svg:g")
      .attr("class", "y axis")
      .attr("transform", "translate(-10,0)")
      .call(yAxisLeft);

  graph.append("text")
      .attr("class", "y label")
      .attr("text-anchor", "end")
      .attr("y", -110)
      .attr("x", -140)
      .attr("dy", ".75em")
      .attr("transform", "rotate(-90)")
      .text("Quantity X"); 
  graph.append("svg:path").attr("d", line1(data)).attr("class", "data1");

  dataCirclesGroup = graph.append('svg:g');
  var circles = dataCirclesGroup.selectAll('.data-point')
    .data(data);

  circles
    .enter()
      .append('svg:circle')
        .attr('class', 'data-point')
        .style('opacity', 1e-6)
        .attr('cx', function(d,i) { return x(dates[i]) })
        .attr('cy', function() { return y(0) })
        .attr('r', function() { return (data.length) ? pointRadius : 0 })
      .transition()
        .style('opacity', 1)
        .attr('cx', function(d,i) { return x(dates[i]) })
        .attr('cy', function(d) { return y(d) });

  circles
    .transition()
      .attr('cx', function(d,i) { return x(dates[i]) })
      .attr('cy', function(d) { return y(d) })
      .attr('r', function() { return (data.length) ? pointRadius : 0 })
      .attr('index', function(d,i) { return i; })
      .style('opacity', 1);

  circles
    .exit()
      .transition()
        .attr('cy', function() { return y(0) })
        .style("opacity", 1e-6)
        .remove();


    $('svg circle').tipsy({ 
      gravity: 'w', 
      html: true, 
      title: function() {
        var d = this.__data__;
        return numberWithCommas(d) + 
               '<br/> on ' + dates[$(this).attr("index")]; 
      }
    });
});
4

1 に答える 1

0

Safari 6.0.5 で確認しましたが、問題ありません。svg には多くのバグがあります。見つけた場合は、こちらのようにブラウザ開発者に説明全体を投稿できます。

于 2013-06-27T02:54:41.973 に答える