将外部数据 (.tsv) 加载到 d3.js答案

【问题标题】：Load external data (.tsv) into d3.js将外部数据 (.tsv) 加载到 d3.js
【发布时间】：2017-03-16 07:54:12
【问题描述】：

我正在开发 d3.js v4，我正在尝试从 data.tsv 文件加载外部数据，但它没有加载，这是我的代码：

var bardata = [];

d3.tsv('data.tsv', function(){
    
    for (key in data){
        bardata.push(data[key].year.value)
    }
    
    var margin = {top:30, right:30, bottom:40, left:50}

var height = 400 - margin.top - margin.bottom,
  width = 400 - margin.left - margin.right,
  barWidth = 50,
  barOffset = 5;
var tempColor;

var yScale = d3.scaleLinear()
  .domain([0, d3.max(bardata)])
  .range([0, height]);

var xScale = d3.scaleBand()
  .domain(d3.range(0, bardata.length))
  .padding(0.1)
  .range([0, width]);

var tooltip = d3.select('body').append('div')
.style('position', 'absolute')
.style('padding', '0 10px')
.style('background', 'white')
.style('opacity', 0)

var myChart = d3.select('#chart').append('svg')
.style('background', '#E7E0CB')
  .attr('width', width + margin.right + margin.left)
  .attr('height', height + margin.top + margin.bottom)
  .append('g')
  .attr('transform', 'translate('+ margin.left +', '+ margin.top +')')
  .style('background', '#C9D7D6')
  .selectAll('rect').data(bardata)
  .enter().append('rect')
  .style('fill', '#C61C6F')
  .attr('width', xScale.bandwidth())
  

.attr('x', function(d, i) {
    return xScale(i);
  })
.attr('height', 0)
.attr('y', height)

.on('mouseover', function(d){
    d3.select(this)
    .style('opacity', 0.5)
})
.on('mouseleave', function(d){
    d3.select(this)
    .style('opacity', 1)
})
.on('mouseover', function(d){
    tooltip.transition()
    .style('opacity', 0.9)
    tooltip.html(d)
    .style('left', (d3.event.pageX - 35) + 'px')
    .style('top', (d3.event.pageY - 30) + 'px')
    
    tempColor = this.style.fill;
    d3.select(this)
    .style('opacity', 0.5)
    .style('fill', 'yellow')
})
.on('mouseleave', function(d){
    tempColor = this.style.fill;
    d3.select(this)
    .style('opacity', 1)
    .style('fill', '#C61C6F')
})

myChart.transition()
.attr('height', function(d){
    return yScale(d);
})
.attr('y', function(d){
    return height - yScale(d);
})
.delay(function(d, i){
    return i * 20;
})
.duration(1000)
.ease(d3.easeElastic)

var vGuideScale = d3.scaleLinear()
  .domain([0, d3.max(bardata)])
  .range([0, height]);

var vAxis = d3.axisLeft(vGuideScale).ticks(10)

var vGuide = d3.select('svg').append('g')
vAxis(vGuide)

vGuide.attr('transform', 'translate('+ margin.left +', '+ margin.top +')')

var hAxis = d3.axisBottom(xScale).tickValues(xScale.domain().filter(function(d,i){
    return !(i % (bardata.length/5))
}))

var hGuide = d3.select('svg').append('g')
hAxis(hGuide)

hGuide.attr('transform', 'translate('+ margin.left +', '+ (height + margin.top) +')')

});

<!DOCTYPE html>
<html>

<head>
    <title>Bar Chart</title>
    <meta charset="8-UTF">
    <link rel="stylesheet" src="css/style.css"> </head>

<body>
    <div class="container">
        <h2>Bar Chart</h2>
       <div id="chart"></div>
    </div>
    <script src="js/d3.min.js"></script>
    <script src="js/main.js"></script>
</body>

</html>

这是我的 tsv 文件中的数据

year value
2010 23,499,201
2011 22,544,175
2012 24,061,655
2013 23,413,369
2014 27,144,494
2015 26,812,665
2016 30,377,832

它没有错误，但图表上没有任何显示

【问题讨论】：

在我结束这个问题之前：这与您的previous question 有何不同？
@GerardoFurtado 我的 tsv 文件中有多个值，它加载任何东西，整个图表都消失了
你的回调函数需要有一个参数，d3.tsv('data.tsv', function(data){
执行 user3821538 刚才所说的操作，此外，在问题中相应地格式化您的 TSV：不可能看到任何选项卡。
@user3821538 我试过没用

标签： javascript d3.js bar-chart

【解决方案1】：

您现在尝试创建条形图的方式，摆脱 d3.tsv 为您创建的漂亮对象数组并依赖于简单的数字数组，不是足够了，更不用说最方便的方法了。对于任何经验丰富的 D3 编码人员来说，这毫无意义。不过，这里不是我讲课的地方。

话虽如此，我将只解决当前的问题：

d3.tsv在回调中需要一个参数：

d3.tsv('data.tsv', function(data){
//parameter here -------------^

不要在数字中使用逗号。这在我所知道的任何编程语言中都不被接受：
```
23,499,201 ---> 23499201 
```
请记住，正如我在您的 last question 中所说，要避免使用 columns 属性：
```
for (key in data) {
    if (key != "columns") bardata.push(data[key].value)
}
```
将字符串转换为数字：
```
bardata.push(+data[key].value)
```

这就是你的工作代码：

var data = d3.tsvParse(d3.select("#tsv").text());

var bardata = [];
    
    for (key in data){
        if(key != "columns") bardata.push(+data[key].value)
    }
    
    var margin = {top:30, right:30, bottom:40, left:50}

var height = 400 - margin.top - margin.bottom,
  width = 400 - margin.left - margin.right,
  barWidth = 50,
  barOffset = 5;
var tempColor;

var yScale = d3.scaleLinear()
  .domain([0, d3.max(bardata)])
  .range([0, height]);

var xScale = d3.scaleBand()
  .domain(d3.range(0, bardata.length))
  .padding(0.1)
  .range([0, width]);

var tooltip = d3.select('body').append('div')
.style('position', 'absolute')
.style('padding', '0 10px')
.style('background', 'white')
.style('opacity', 0)

var myChart = d3.select('body').append('svg')
.style('background', '#E7E0CB')
  .attr('width', width + margin.right + margin.left)
  .attr('height', height + margin.top + margin.bottom)
  .append('g')
  .attr('transform', 'translate('+ margin.left +', '+ margin.top +')')
  .style('background', '#C9D7D6')
  .selectAll('rect').data(bardata)
  .enter().append('rect')
  .style('fill', '#C61C6F')
  .attr('width', xScale.bandwidth())
  

.attr('x', function(d, i) {
    return xScale(i);
  })
.attr('height', 0)
.attr('y', height)

.on('mouseover', function(d){
    d3.select(this)
    .style('opacity', 0.5)
})
.on('mouseleave', function(d){
    d3.select(this)
    .style('opacity', 1)
})
.on('mouseover', function(d){
    tooltip.transition()
    .style('opacity', 0.9)
    tooltip.html(d)
    .style('left', (d3.event.pageX - 35) + 'px')
    .style('top', (d3.event.pageY - 30) + 'px')
    
    tempColor = this.style.fill;
    d3.select(this)
    .style('opacity', 0.5)
    .style('fill', 'yellow')
})
.on('mouseleave', function(d){
    tempColor = this.style.fill;
    d3.select(this)
    .style('opacity', 1)
    .style('fill', '#C61C6F')
})

myChart.transition()
.attr('height', function(d){
    return yScale(d);
})
.attr('y', function(d){
    return height - yScale(d);
})
.delay(function(d, i){
    return i * 20;
})
.duration(1000)
.ease(d3.easeElastic)

var vGuideScale = d3.scaleLinear()
  .domain([0, d3.max(bardata)])
  .range([0, height]);

var vAxis = d3.axisLeft(vGuideScale).ticks(10)

var vGuide = d3.select('svg').append('g')
vAxis(vGuide)

vGuide.attr('transform', 'translate('+ margin.left +', '+ margin.top +')')

var hAxis = d3.axisBottom(xScale).tickValues(xScale.domain().filter(function(d,i){
    return !(i % (bardata.length/5))
}))

var hGuide = d3.select('svg').append('g')
hAxis(hGuide)

hGuide.attr('transform', 'translate('+ margin.left +', '+ (height + margin.top) +')')

pre{
  display: none;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<pre id="tsv">year	value
2010	23499201
2011	22544175
2012	24061655
2013	23413369
2014	27144494
2015	26812665
2016	30377832
</pre>

再说一遍：我使用<pre> 元素来存储数据。不要像 last time 那样简单地复制/粘贴我的 sn-p。

【讨论】：