Question

我正在尝试使用d3.js版本4进行条形图，我正在尝试制作垂直轴，它给出了以下错误：Bn（d3.min.js：2）处的未捕获错误在main.js：88

的Kn.vp [as ease]（d3.min.js：5）

这是我的代码：

var bardata = [];

for (var i=0; i < 20; i++){
    bardata.push(Math.random())
}

bardata.sort(function compareNumbers(a,b){
    return a -b;
})

var height = 400,
  width = 600,
  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')

  .attr('width', width)
  .attr('height', height)
  .append('g')
  .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('elastic')

var vAxis = d3.svg.axis()
.scale(yScale)
.orient('left')
.ticks(10)

var vGuide = d3.select('svg').append('g')
vAxis(vGuide)

vGuide.attr('transform', 'translate(35,0)')

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

Answer 1

而不是

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('elastic')//INCORRECT

应该是

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)

工作代码https://stackoverflow.com/a/3405560/1004631

D3条形图垂直轴

1 个答案: