折れ線グラフの作成方法に関する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")];
}
});
});