0
レンダリングキューを使用してD3折れ線グラフをレンダリングできますか？ http://bl.ocks.org/syntagmatic/raw/3341641/D3折れ線グラフ - レンダリングキュー
私は約50,000の要素を持つJSONを持っています。このような大量のデータでグラフを描画しようとすると、ブラウザがクラッシュします。
コードは次のとおりです。
function lineChart(data, id){
\t // Set the dimensions of the canvas/graph
\t var margin = {top: 30, right: 20, bottom: 30, left: 50},
\t \t width = 1000 - margin.left - margin.right,
\t \t height = 370 - margin.top - margin.bottom;
\t // Parse the date/time
\t var parseDate = d3.time.format("%d-%b-%y").parse;
\t // Define the div for the tooltip
\t var div = d3.select("body").append("div") \t
\t \t .attr("class", "tooltip") \t \t \t \t
\t \t .style("opacity", 0);
\t // Set the ranges
\t var x = d3.time.scale().range([0, width]);
\t var y = d3.scale.linear().range([height, 0]);
\t // Define the axes
\t var xAxis = d3.svg.axis().scale(x)
\t \t .orient("bottom").ticks(5);
\t var yAxis = d3.svg.axis().scale(y)
\t \t .orient("left").ticks(5);
\t // Define the line
\t var valueline = d3.svg.line()
\t \t .x(function(d) { return x(d.time); })
\t \t .y(function(d) { return y(d.loadaverage); })
\t \t \t
\t // Adds the svg canvas
\t var svg = d3.select(id)
\t \t .append("svg")
\t \t \t .attr("width", width + margin.left + margin.right)
\t \t \t .attr("height", height + margin.top + margin.bottom)
\t \t .append("g")
\t \t \t .attr("transform",
\t \t \t \t "translate(" + margin.left + "," + margin.top + ")");
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.time; }));
y.domain([0, d3.max(data, function(d) { return d.loadaverage; })]);
\t \t // Add the valueline path.
\t \t svg.selectAll('path')
\t \t \t .data(pos)
\t \t \t .enter()
\t \t \t .append("path")
\t \t \t .attr("class", "line")
\t \t \t .attr("d", valueline(data))
\t \t \t .on("mouseover", function(d) {
\t \t \t \t div.transition() \t \t
\t \t \t \t \t .duration(200) \t \t
\t \t \t \t \t .style("opacity", .9); \t \t
\t \t \t \t div.html(d.time + "<br/>" + d.loadaverage)
\t \t \t \t \t .style("left", (d3.event.pageX) + "px") \t \t
\t \t \t \t \t .style("top", (d3.event.pageY - 28) + "px"); \t
\t \t \t \t }) \t \t \t \t \t
\t \t \t .on("mouseout", function(d) { \t \t
\t \t \t \t div.transition() \t \t
\t \t \t \t \t .duration(500) \t \t
\t \t \t \t \t .style("opacity", 0); \t
\t \t \t });
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
}
注：私はD3バージョン3を使用しています – ktrev