问题
I want to plot histogram using csv data using d3.js. I'm referring this link. In that tutorial they are using local file csv data but in my application data comes from the web-socket so, I'm thinking that I can collect this data and create one string as a csv data and pass this string to the d3.csv or d3.csv.parse function. meanwhile, I'm getting stuck at one point because my data is not properly populating over web-page.
Web-socket server is sending this file data line by line :
date,bucket,count
1468332421041000,40000,2
1468332421102000,30000,6
1468332421103000,30000,8
1468332421116000,30000,10
1468332421117000,30000,2
1468332421139000,30000,2
1468332421155000,50000,2
1468332421158000,40000,2,
1468332421164000,30000,12
This date is in epoch so, In the client side I need to convert it in human readable format.
Client html program -
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
.label {
font-weight: bold;
}
.tile {
shape-rendering: crispEdges;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<p id="demo"></p>
<script>
var csv_data = '';
var flag = true;
if ("WebSocket" in window)
{
// Let us open a web socket
var ws = new WebSocket("ws://localhost:3333");
ws.onopen = function()
{
};
ws.onmessage = function (evt)
{
var received_msg = evt.data;
if(flag)
{
csv_data = evt.data +"\n"
}
else
{
var b = received_msg.substring(17)
var a = received_msg.substring(0,13)
var dateVal = a;
var date = new Date(parseFloat(dateVal));
csv_data += date.getFullYear() + "-" +
(date.getMonth() + 1) + "-" +
date.getDate() + " " +
date.getHours() + ":" +
date.getMinutes() + ":" +
date.getSeconds() +" "+
date.getMilliseconds() +","+b+"\n"
}
flag = false;
readCsv();
};
ws.onclose = function()
{
alert("Connection is closed...");
};
}
else
{
// The browser doesn't support WebSocket
alert("WebSocket NOT supported by your Browser!");
}
var margin = {top: 20, right: 90, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y-%m-%d").parse,
formatDate = d3.time.format("%b %d");
var x = d3.time.scale().range([0, width]),
y = d3.scale.linear().range([height, 0]),
z = d3.scale.linear().range(["white", "steelblue"]);
// The size of the buckets in the CSV data file.
// This could be inferred from the data if it weren't sparse.
var xStep = 864e5,
yStep = 100;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
function readCsv()
{
d3.csv(csv_data, function(buckets) {
// Coerce the CSV data to the appropriate types.
buckets.forEach(function(d) {
d.date = parseDate(d.date);
d.bucket = +d.bucket;
d.count = +d.count;
});
// Compute the scale domains.
x.domain(d3.extent(buckets, function(d) { return d.date; }));
y.domain(d3.extent(buckets, function(d) { return d.bucket; }));
z.domain([0, d3.max(buckets, function(d) { return d.count; })]);
// Extend the x- and y-domain to fit the last bucket.
// For example, the y-bucket 3200 corresponds to values [3200, 3300].
x.domain([x.domain()[0], +x.domain()[1] + xStep]);
y.domain([y.domain()[0], y.domain()[1] + yStep]);
// Display the tiles for each non-zero bucket.
// See http://bl.ocks.org/3074470 for an alternative implementation.
svg.selectAll(".tile")
.data(buckets)
.enter().append("rect")
.attr("class", "tile")
.attr("x", function(d) { return x(d.date); })
.attr("y", function(d) { return y(d.bucket + yStep); })
.attr("width", x(xStep) - x(0))
.attr("height", y(0) - y(yStep))
.style("fill", function(d) { return z(d.count); });
// Add a legend for the color values.
var legend = svg.selectAll(".legend")
.data(z.ticks(6).slice(1).reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(" + (width + 20) + "," + (20 + i * 20) + ")"; });
legend.append("rect")
.attr("width", 20)
.attr("height", 20)
.style("fill", z);
legend.append("text")
.attr("x", 26)
.attr("y", 10)
.attr("dy", ".35em")
.text(String);
svg.append("text")
.attr("class", "label")
.attr("x", width + 20)
.attr("y", 10)
.attr("dy", ".35em")
.text("Count");
// Add an x-axis with label.
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.svg.axis().scale(x).ticks(d3.time.days).tickFormat(formatDate).orient("bottom"))
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.attr("text-anchor", "end")
.text("Date");
// Add a y-axis with label.
svg.append("g")
.attr("class", "y axis")
.call(d3.svg.axis().scale(y).orient("left"))
.append("text")
.attr("class", "label")
.attr("y", 6)
.attr("dy", ".71em")
.attr("text-anchor", "end")
.attr("transform", "rotate(-90)")
.text("Latency");
});
}
</script>
</body>
</html>
I want to know how I can provide string to parse as a csv data to d3.csv function and after processing it what changes I want to do further? Because In that tutorial date is only in the format i.e. yyyy-mm-dd But In my scenario date is in (after converting to human readable format) i.e. yyyy-mm-dd hh:mm:ss mmm format.
来源：https://stackoverflow.com/questions/38887211/how-to-pass-string-as-a-argument-to-d3-csv-function-and-process-further-for-pl