使用外部数据的D3条形图 [英] D3 barchart using external data

查看：58
本文介绍了使用外部数据的D3条形图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用d3.js v4创建了一个条形图，我试图使用外部数据文件（.tsv）文件，它给我以下错误：错误：属性高度：预期长度，NaN。 （匿名）@ d3.min.js：2 o @ d3.min.js：2 yn @ d3.min.js：2 mn @ d3.min.js：2 d3.min.js：2错误：属性y：预期长度，NaN。

I made a bar chart using d3.js v4 and im trying to use external data file (.tsv) file and it gives me the following error: Error: attribute height: Expected length, "NaN". (anonymous) @ d3.min.js:2 o @ d3.min.js:2 yn @ d3.min.js:2 mn @ d3.min.js:2 d3.min.js:2 Error: attribute y: Expected length, "NaN".

这是我的代码：

var bardata = [];

d3.tsv('data.tsv', function(data){

    for (key in data){
        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('#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>Line 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>

这里是我的data.tsv
值
23
22
24
23
27
26
30

and here is my data.tsv value 23 22 24 23 27 26 30

推荐答案

问题在于：

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())

在一个变量中，你是：


  1. 追加SVG

  2. 附加组

  3. 创建输入选择

  4. 附加矩形

  1. appending an SVG
  2. appending a group
  3. creating an enter selection
  4. appending the rectangles

而不是那样，让我们​​打破这个变量：

Instead of that, let's break that variable:

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

var rects = myChart.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)

然后，您单独调用 rects 上的转换。

Then, you call the transition on rects alone.

除此之外请注意列属性，该属性由 d3.tsv 自动创建：

Besides that, mind the columns property, which is automatically created by d3.tsv:

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

这是你的工作代码：

var bardata = [];

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

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

var rects = myChart.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')
  })

rects.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">value
23
22
24
23
27
26
30
</pre>

这篇关于使用外部数据的D3条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆