如何在d3多线图中使用json数据而不是tsv文件？

jsfiddle链接https://jsfiddle.net/8vhsLor6/

基本上我想用json对象替换tsv文件数据。 我收到了错误。 输入错误

var cities = data.columns.slice(1).map(function(id) { 

我有这样的数据

 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"} ]; 

Answer 1

版本4中的d3.tsv：

当将数据从Bostock的代码从TSV更改为JSON（或者更准确地说，更改为变量）时，您忘记了一些重要的事情：在新的D3 v4.x中， d3.tsv函数创建了一个名为columns的数组属性 。

此属性包含TSV文件的所有标头作为数组。 在原始代码中，如果你是console.log(data.columns) ，你会得到这个：

 ["date", "New York", "San Francisco", "Austin"]; 

所以，基本上，为了让你的代码工作，我所做的就是添加这个属性：

 data.columns = ["date", "New York", "San Francisco", "Austin"]; 

这是你的小提琴： https ： //jsfiddle.net/uz9rtcwd/

PS：您的日期格式错误。 此外，您必须解析data数组中的日期（此步骤对应于d3.tsv的访问器函数，但请记住d3.json没有访问器函数）。

Answer 2

要使多线图需要添加几个步骤： –

• 找出y轴的唯一键
• 时间解析是另一个重要因素
• 添加线条和路径的样式。

 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; }