问题
jsfiddle link https://jsfiddle.net/8vhsLor6/
Basically I want to replace tsv file data with json object. I am getting error. Type error
var cities = data.columns.slice(1).map(function(id) {
I have data like this
var data = [
{date:"1-May-12","New York":"58.13", "San Francisco":"58.13", "Austin": "43"},
{date:"30-Apr-12","New York":"53.98" , "San Francisco":"48.13", "Austin": "53"},
{date:"27-Apr-12","New York":"67.00", "San Francisco":"38.13", "Austin": "63"},
{date:"26-Apr-12","New York":"89.70", "San Francisco":"28.13", "Austin": "73"},
{date:"25-Apr-12","New York":"99.00", "San Francisco":"18.13", "Austin": "83"}
];
回答1:
d3.tsv in version 4:
When changing the data from Bostock's code from a TSV to a JSON (or, more precisely, to a variable), you forgot something important: In the new D3 v4.x, d3.tsv
function creates an array property called columns.
This property contains all the headers of the TSV file as an array. In the original code, if you console.log(data.columns)
, you'll get this:
["date", "New York", "San Francisco", "Austin"];
So, basically, for your code to work, all I did was adding this property:
data.columns = ["date", "New York", "San Francisco", "Austin"];
Here is your fiddle: https://jsfiddle.net/uz9rtcwd/
PS: You have a wrong date format. Also, you have to parse the dates in the data
array (this step corresponds to the accessor function in the d3.tsv
, but keep in mind that d3.json
has no accessor function).
回答2:
To make the multiline graph have a few steps need to be added:-
- Find out the unique keys for y-axis
- Time parsing is another important factor
- Add style for the line and path.
var svg = d3.select("svg"),
margin = {top: 20, right: 80, bottom: 30, left: 50},
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var parseTime = d3.timeParse("%e-%b-%y")
var x = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
z = d3.scaleOrdinal(d3.schemeCategory10);
var line = d3.line()
.curve(d3.curveBasis)
.x(function(d) { return x(parseTime(d.date)); })
.y(function(d) { return y(d.temperature); });
var data = [
{date:"1-May-12","New York":"58.13", "San Francisco":"58.13", "Austin": "43"},
{date:"30-Apr-12","New York":"53.98" , "San Francisco":"48.13", "Austin": "53"},
{date:"27-Apr-12","New York":"67.00", "San Francisco":"38.13", "Austin": "63"},
{date:"26-Apr-12","New York":"89.70", "San Francisco":"28.13", "Austin": "73"},
{date:"25-Apr-12","New York":"99.00", "San Francisco":"18.13", "Austin": "83"}
];
var keys =d3.keys(data[0]);
var i = keys.indexOf('date')
if(i != -1) {
keys.splice(i, 1);
}
var cities = keys.map(function(d) {
return {
id:d,
values: data.map( function(e) {
return {
date: e.date,
temperature: e[d]
};
})
} });
x.domain(d3.extent(data, function(d) { return parseTime(d.date); }));
y.domain([
d3.min(cities, function(c) { return d3.min(c.values, function(d) { return d.temperature; }); }),
d3.max(cities, function(c) { return d3.max(c.values, function(d) { return d.temperature; }); })
]);
z.domain(cities.map(function(c) { return c.id; }));
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("fill", "#000")
.text("Temperature, ºF");
var city = g.selectAll(".city")
.data(cities)
.enter().append("g")
.attr("class", "city");
city.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return z(d.id); });
city.append("text")
.datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(parseTime(d.value.date)) + "," + y(d.value.temperature) + ")"; })
.attr("x", 3)
.attr("dy", "0.35em")
.style("font", "10px sans-serif")
.text(function(d) { return d.id; });
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="960" height="500"></svg>
var keys =d3.keys(data[0]);
var i = keys.indexOf('date')
if(i != -1) {
keys.splice(i, 1);
}
var cities = keys.map(function(d) {
return {
id:d,
values: data.map( function(e) {
return {
date: e.date,
temperature: e[d]
};
})
} });
来源:https://stackoverflow.com/questions/39717041/how-to-use-json-data-instead-of-tsv-file-in-d3-multi-line-charts