如何在d3多行圖表中使用json數據而不是tsv文件？

Question

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：

當從TSV改變從Bostock's code數據到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

數據爲使多圖有幾個步驟需要添加： -

• 找出unique keys爲y軸
• Time parsing是另一個重要因素
• 添加樣式爲線路和路徑。

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

 
\t 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] }; }) } });