0
Können wir ein D3-Liniendiagramm mit Render Queue rendern? http://bl.ocks.org/syntagmatic/raw/3341641/D3 Liniendiagramm - Render-Warteschlange
Ich habe ein JSON mit etwa 50.000 Elementen darin. Mein Browser stürzt ab, wenn ich versuche, ein Diagramm mit so vielen Daten zu zeichnen.
-Code ist:
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);
}
Hinweis: Ich verwende D3 Version 3 – ktrev