Question

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

＆＃13;

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) +')')

});

＆＃13;

<!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>

＆＃13;

这是我的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

它没有错误，但图表上没有任何内容

Answer 1

您现在正在尝试创建条形图的方式，摆脱好的数组void LandslideTraining::on_buttonBox_accepted() { Mat seg1=image; string segem="a/b/c.jpg"; double minVal, maxVal; minMaxLoc(seg1, &minVal, &maxVal); seg1.convertTo(seg, CV_8U, 255.0/(maxVal - minVal), -minVal * 255.0/(maxVal - minVal)); namedWindow(segem,WINDOW_AUTOSIZE); cv::setMouseCallback(segem,CallBackFunc,this); imshow(segem,seg); }为您创建并依赖于一个简单的数字数组，不是< / strong>足够的，更不用说最方便的方法了。对于任何经验丰富的D3编码器，它没有多大意义。但是，这不是我在这里讲课的地方。

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

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

d3.tsv

不要在你的号码中加逗号。在我所知道的任何编程语言中都不接受这一点：

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

请记住，正如我在last question中所说的那样，要避免使用23,499,201 ---> 23499201财产：

columns

将字符串转换为数字：

for (key in data) { if (key != "columns") bardata.push(data[key].value) }

总之，这是你的工作代码：

＆＃13;
＆＃13;
bardata.push(+data[key].value)
＆＃13;
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) +')')
＆＃13;
pre{ display: none; }
＆＃13;
＆＃13;
＆＃13;

再次：我使用<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>元素来存储数据。不要像我last time一样简单地复制/粘贴我的代码片段。

将外部数据（.tsv）加载到d3.js中

1 个答案: